...

View Full Version : .class:hover not working in firefox



moose99
03-11-2006, 06:40 PM
Can someone explain to me why this code doesn't work in firefox?

<html>
<head>
<title>Hover Test</title>
<style>
.something:hover { background-color: orange; }
</style>
</head>
<body>
<span class='something'>Moose</span>
</body>
</html>

It does work if you use an id rather than a class or just use an html tag selector such as span. Eg #something:hover or span:hover.

This code works fine in Opera.

bustamelon
03-11-2006, 07:28 PM
Need the selector to specify the hover action, ie:

a.something:hover, span.something:hover, div.something:hover {
background-color: orange;
}

A little redundant but such is the voodoo of browser compatibility.

Actually, I wouldn't be surprised to learn that IE only applies :hover to the anchor tag.

VIPStephan
03-11-2006, 07:32 PM
Bustamelon is kinda wrong (or not actually right).

It's the missing doctype.

Use this for example (in the total beginning od your document):



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">


And to save you another post with the question why it isn't working in IE: It won't work in IE because it doesn't support the :hover pseudo class on any element except on anchors. You would have to use JavaScript for this.

bustamelon
03-11-2006, 07:38 PM
Bustamelon is kinda wrong (or not actually right).

It's the missing doctype.

Use this for example (in the total beginning od your document):



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">


And to save you another post with the question why it isn't working in IE: It won't work in IE because it doesn't support the :hover pseudo class on any element except on anchors. You would have to use JavaScript for this.

Can't win em all. At least I was right on on the last thing re: IE.

Kravvitz
03-11-2006, 08:19 PM
You should specify the type attribute on the style element.

<style type="text/css">

IE(4 through 6)/Win only support :hover on <a> elements.
Three ways to simulate :hover in IE:
Dean Edward's "IE7" patch for IE5-6 (http://dean.edwards.name/IE7/)
http://www.htmldog.com/articles/suckerfish/
whatever:hover (http://www.xs4all.nl/~peterned/csshover.html)

Information about doctypes:
http://hsivonen.iki.fi/doctype/
http://www.alistapart.com/articles/doctype/
http://www.juicystudio.com/choosing-doctype/
http://www.w3.org/QA/2002/04/valid-dtd-list.html

moose99
03-13-2006, 10:22 PM
Thanks for the help. Not using a doctype will most likely(always?) trigger mozillas quirk mode in which the following (taken from mozilla website) applies.

The :hover pseudoclass will only be applied to links, images, and form controls, unless the selector includes tag names, ids, or attributes.

Also, I don't care whether it works in IE as for now the page I'm developing is for my own personal use.

meth
03-13-2006, 10:55 PM
<script type="text/javascript" language="javascript">
<!---//
// patch ie's lack of support for CSS hover psuedo class
// by Patrick Griffiths and Dan Webb

startList = function() {
if (document.all && document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;
//-->
</script>


Can be tweaked for many applications.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum