Hmm... Pure CSS roll-overs?

liunx · Jan 11, 2008

Is it possible to have a totaly css roll-over, by this I mean when you move a mouse over it it changes colour.

If anyone can post a code / demonstration it would be most helpful

Cheers,

RyanJThere's the way that works on all elements, however it doesn't work in IE. Currently, the only way a CSS rollover will work in IE is if it's in an anchor.div#box {
background-color: #39c;
border: 1px solid #000;
width: 300px;
height: 300px;
position: absolute;
margin: -150px 0 0 -150px;
}
div#box:hover {
background-color: #09f;
border-color: #069;
}
div#box a {
color: #000;
text-decoration: underline;
}
div#box a:hover {
color: #fff;
text-decoration: none;
}

<div id="box">If you hover over this box in Firefox, the background and border will change color. If you hover over <a href=http://www.webdeveloper.com/forum/archive/index.php/"#">this link</a> in any browser, the color will change and the underline will disappear.</div>Cheers Dan

Very helpful, thanks.

RyanJThis code is used in the sucker fish drop down menu. It has a very...very small bit of java script that goes in the head section of the page...here is the code

sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls.onmouseover=function() {
this.className+=" sfhover";
}
sfEls.onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

Then you would apply it to the object in css that you want to apply the hover command to.

The following would allow the list it to change color when it was hovered over.

This is how you would normally do it if IE worked correctly

#nav li:hover {color: #000000}

But since IE is broke add this

#nav li:hover, #nav li.sfhover { color: #000000}

You can add this ".sfhover" to anything that supports the hover command in css2 but does not work in IE.

While its not total css, it is a whole lot smaller then normal.Pure CSS (IE compatible) image rollovers:Cheers all, I'll try each and see which is best (Or use all XD)

Thanks again,

RyanJOriginally posted by Daniel T
There's the way that works on all elements, however it doesn't work in IE. Currently, the only way a CSS rollover will work in IE is if it's in an anchor.div#box {
background-color: #39c;
border: 1px solid #000;
width: 300px;
height: 300px;
position: absolute;
margin: -150px 0 0 -150px;
}
div#box:hover {
background-color: #09f;
border-color: #069;
}
div#box a {
color: #000;
text-decoration: underline;
}
div#box a:hover {
color: #fff;
text-decoration: none;
}

<div id="box">If you hover over this box in Firefox, the background and border will change color. If you hover over <a href=http://www.webdeveloper.com/forum/archive/index.php/"#">this link</a> in any browser, the color will change and the underline will disappear.</div>

very true, but vladdy describes how it can be fixed (<a class="postlink" href="http://www.vladdy.net/Demos/iepseudoclassesfix.html">http://www.vladdy.net/Demos/iepseudoclassesfix.html</a>) by adding a .htc file. This will then work in all the browsers that it did work in ignoring the .htc file and it will work in IE which will read the .htc file. It is very easy, small, and works GREAT Originally posted by pawky
very true, but vladdy describes how it can be fixed (<a class="postlink" href="http://www.vladdy.net/Demos/iepseudoclassesfix.html">http://www.vladdy.net/Demos/iepseudoclassesfix.html</a>) by adding a .htc file. This will then work in all the browsers that it did work in ignoring the .htc file and it will work in IE which will read the .htc file. It is very easy, small, and works GREAT Though, outrageously invalid unless you have access to a server-side language. If you have a server-side language, you can check for IE and import the behaviors stylesheet if the user is using IE.Originally posted by Daniel T
Though, outrageously invalid unless you have access to a server-side language. If you have a server-side language, you can check for IE and import the behaviors stylesheet if the user is using IE.
What is so outrageously invalid, huh?
<a class="postlink" href="http://www.w3.org/TR/CSS21/syndata.html#parsing-errorsyea">http://www.w3.org/TR/CSS21/syndata.html ... -errorsyea</a>, i dont c how it isnt valid Originally posted by Vladdy
What is so outrageously invalid, huh?
<a class="postlink" href="http://www.w3.org/TR/CSS21/syndata.html#parsing-errors">http://www.w3.org/TR/CSS21/syndata.html#parsing-errors</a> Ahhh... nice Before, I had just been using the behavior in the CSS, without any of that other stuff, which gave an error TIME OUT!

This method IS infact invalid. Vladdy, try validating the CSS on that article you wrote Validator is not a Bible, but a tool that helps you make better web sites.
CSS that does not give you validation errors (notive that it is different from "valid CSS") is NOT a goal and actually most times is impossible when you try to keep the dumb IE happy.
What you need to do when running CSS through validator is to understand each error and warning and how it may affect your web site.Validates html strict and happy css ... one small bg image and nothing else.
Demo link... (<a class="postlink" href="http://mywebpages.comcast.net/abhoth/seecrap/index.htm">http://mywebpages.comcast.net/abhoth/seecrap/index.htm</a>)Originally posted by Abhoth
Validates html strict and happy css ... one small bg image and nothing else.
Demo link... (<a class="postlink" href="http://mywebpages.comcast.net/abhoth/seecrap/index.htm">http://mywebpages.comcast.net/abhoth/seecrap/index.htm</a>)That's because IE supports the :hover psuedo-class on anchor elements, just not on other elements.

And dude, do write for Star Trek or something? Check out lipsum.com (<a class="postlink" href="http://www.lipsum.com">http://www.lipsum.com</a>) for all your filler text needs. Yeah, but I try not to dwell on what IE does, doesn't or should support... gives me a headache.

Hmm... Pure CSS roll-overs?

liunx

Guest