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 5 of 5

Thread: css hover fail

  1. #1
    New Coder
    Join Date
    Jun 2005
    Posts
    44
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Question css hover fail

    I use css hover,like follows code,but when I use mouse over the items,but I don't find the item backgound change! Why hover fail? How to correct following code? Thanks!

    Code:
    <style>
    .menubar {
     border-bottom: 1px solid #AACCF6;
     color: #222222;
     cursor: pointer;
     display: block;
     height: 20px;
     width: 50px;
     line-height: 17px;
     outline-color: -moz-use-text-color;
     outline-style: none;
     outline-width: 0;
     padding: 3px;
     text-align: center;
     text-decoration: none;
     white-space: nowrap;
    }
    
    .menubar:hover { 
     background: #EBF3FD url("item-over.jpg") repeat-x scroll left bottom;
     text-decoration: none;
    }
    </style>
    
    <body>
    <ul id="knowledgemenu" class="x-hidden mymenu">
          <li><a id="knowledge"  class="menubar">Navigation</a></li>
          <li><a id="bbs"    class="menubar">Item1</a></li>
          <li><a id="question"    class="menubar">Item2</a></li>
          <li><a id="sloved"    class="menubar">Item3</a></li>
        </ul>
    </body>

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    That code's fine in FF and IE7.

    If it's IE7 that's the problem I guess you may not have a valid doctype.

    It won't work in IE6 because :hover is only supported on anchor <a> elements. If you're trying to get bit working in IE6 I'd suggest applying the styling direct to the a rather than the li, for a simple fix.

    EDIT:Ignore the last paragraph - misread your code (see Aero's post below)
    Last edited by SB65; 08-10-2010 at 07:47 AM.

  • #3
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,300
    Thanks
    28
    Thanked 275 Times in 269 Posts
    FYI, outline-color: -moz-use-text-color is deprecated. Mozilla supports CSS3 Color's currentColor keyword now.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Quote Originally Posted by SB65 View Post
    That code's fine in FF and IE7.

    It won't work in IE6 because :hover is only supported on anchor <a> elements. If you're trying to get bit working in IE6 I'd suggest applying the styling direct to the a rather than the li, for a simple fix.

    If it's IE7 that's the problem I guess you may not have a valid doctype.
    But the OP is using :hover on the anchors, not the li elements. So its likely there is something else overriding the background.

    @OP please post a link to your page.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #5
    New to the CF scene
    Join Date
    Aug 2010
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    learnning


  •  

    Posting Permissions

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