Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Mar 2006
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    .class:hover not working in firefox

    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.

  • #2
    Regular Coder
    Join Date
    Mar 2006
    Location
    Connecticut, USA
    Posts
    400
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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.
    Last edited by bustamelon; 03-11-2006 at 07:31 PM.

  • #3
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,677
    Thanks
    6
    Thanked 1,008 Times in 981 Posts
    Bustamelon is kinda wrong (or not actually right).

    It's the missing doctype.

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

    Code:
    <!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.

  • #4
    Regular Coder
    Join Date
    Mar 2006
    Location
    Connecticut, USA
    Posts
    400
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by VIPStephan
    Bustamelon is kinda wrong (or not actually right).

    It's the missing doctype.

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

    Code:
    <!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.

  • #5
    Senior Coder
    Join Date
    Feb 2006
    Location
    USA
    Posts
    1,013
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You should specify the type attribute on the style element.
    Code:
    <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://www.htmldog.com/articles/suckerfish/
    whatever:hover

    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
    Learn CSS. | SSI | PHP includes | X/HTML Validator | CSS validator | Dynamic Site Solutions
    Java != JavaScript && JScript != JavaScript
    Design/program for Firefox (and/or Opera), apply fixes for IE, not the other way around.

  • #6
    New to the CF scene
    Join Date
    Mar 2006
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.
    Last edited by moose99; 03-13-2006 at 10:26 PM.

  • #7
    Regular Coder meth's Avatar
    Join Date
    Jan 2003
    Posts
    262
    Thanks
    0
    Thanked 9 Times in 9 Posts
    Code:
    <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.
    I do Web Design, Brisbane based.
    More time spent in PHP/MySQL Web Development.
    And Search Engine Optimisation takes up the rest of it.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •