SkillShare - A place to discuss Web Standards and Web Design topics
Categories
Vanilla 1.1.5a is a product of Lussumo. More Information: Documentation, Community Support.
Browser Specific Problems: CSS Div Background-Color Change on Rollover (with JavaScript?)
Bottom of Page1 to 6 of 6
-
- CommentAuthortxsoccerstar
- CommentTimeAug 5th 2007 edited
CSS Div Background-Color Change on Rollover (with JavaScript?)I have a series of posts, and I want the background-color of my post to get a little darker when you hover over it.. Specifically, I am talking about changing the ‘background-color’ property of a div (which contains my post content) to a different value when the mouse is held over it like the post list at the North x East blog.
I searched around for a script to do this and I found the Techpatterns.com Javascript Class Switcher which I tried out. At first it seemed like the script would work fine, until I realized that the script does not work well if you have more elements inside the element that has the hover effect. That didn’t make too much sense, I know, but that part isn’t really important. It didn’t work like I wanted.
Here’s my HTML and CSS if you want to look at it. There are two sets, one with the “Javascript Class Switcher” code included and another set without the script.
-
#divname {
background-color:red;
}
#divname:hover {
background-color:green;
} -
You forgot to mention that won't work in IE6.
The following will work (although you will need javascript enabled)
window.onload = hoverstates;
function hoverstates()
{
var yadda = document.getElementsByTagName('div');
for (var i=0;i<yadda.length;i++) {
yadda[i].setAttribute("oldclass", yadda[i].className);
yadda[i].onmouseover = function() { this.className = "on " + this.getAttribute("oldclass"); };
yadda[i].onmouseout = function() { this.className = this.getAttribute("oldclass"); };
}
}
Then, you have your div.on { background-color:#cccccc } and you are all set. -
Or just use the dean edwards ie7 script. I wrote a blog entry about using the dean edwards script. It adds the hover pseudo class to all elements in IE 6.
-
- CommentAuthortxsoccerstar
- CommentTimeAug 6th 2007
RepliesThanks, Matt. I will try what you suggested & see if it works.
Tetuso, thank you for your suggestion, but Matt is right, the ":hover" can only be used with the "a" attribute in IE6. Using the ":hover" for any other element is supported in the new CSS 2 standards, so it works in Firefox, Opera, and maybe in IE7, but will not work in IE6 or below.
I already knew that before I posted this, and I should have let you know in my original post. I am really looking for some JavaScript to do the trick. -
That's not true guys. The method I highlighted works fine in IE6 using the whatever:hover behaviour - No ugly Javascript hacks required.
Download the file and simply use:body {
behavior:url("csshover.htc");
}
In your CSS (or IE6 specific CSS)
1 to 6 of 6