CSS Hover not working?

Question

I have a short descrption on a menu that I do not want to show until you hover over the menu. I cannot get this to work and not sure why. In my example the intended outcome is the words My Work should be hidden initially then on hover the words My Work become visible. The hover isn't working.

Here is a working fiddle and the code:

HTML

<ul id="sdt_menu" class="sdt_menu">
<li>
    <a href="#">
        <img src="images/1.jpg" alt=""/>
        <span class="sdt_active"></span>
        <span class="sdt_wrap">
            <span class="sdt_link">Portfolio</span>
            <span class="sdt_descr">My work</span>
        </span>
     </a>
   </li>
 </ul>

CSS

ul.sdt_menu li .sdt_descr{
   visibility:hidden;
}
ul.sdt_menu li .sdt_descr:hover{
   visibility:visible;
}

I do not mind using jQuery if that is a better solution.

@IgorJerosimić - It is hidden initially and will become visible on hover, well that is the intended outcome but the hover doesn't seem to work. — L84
– L84, Commented Feb 10, 2013 at 23:14
@ŠimeVidas - It controls the menu movement and function. It is not specific to the question but is there to show how to menu properly works. — L84
– L84, Commented Feb 10, 2013 at 23:16

ozk · Accepted Answer · 2013-02-10 23:18:13Z

3

This is strange behavior (having something hidden until the user hovers it). It's essentially a hidden feature, so potentially a UX problem.

Other than that, the element isn't registering as "hovered" since it is hidden. You can use opacity (and its IE specific counterpart filter:alpha) to make the element completely transparent until hovered, giving the desired effect:

ul.sdt_menu li .sdt_descr{
    opacity: 0;
    filter:alpha(opacity=0);
}
ul.sdt_menu li .sdt_descr:hover{
    opacity: 1;
    filter:alpha(opacity=100);
}

should probably do the trick.

answered Feb 10, 2013 at 23:18

ozk

2,0221 gold badge15 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

L84 Over a year ago

Thanks, that does work, however, I realized part of my problem. You must hover over the element itself, not just the menu. Thanks for the UX recommendation. In context it works well.

Igor Jerosimić · Accepted Answer · 2013-02-10 23:24:14Z

1

Instead of this:

ul.sdt_menu li .sdt_descr:hover{
   visibility:visible;
}

put this:

ul.sdt_menu li:hover .sdt_descr{
   visibility:visible;
}

This will allow you to show description when user hovers the li element. http://jsfiddle.net/2Wrj7/3/

answered Feb 10, 2013 at 23:24

Igor Jerosimić

13.7k7 gold badges47 silver badges55 bronze badges

1 Comment

L84 Over a year ago

Thanks, that was my desired results. I actually took an idea from @ozk with opacity, sprinkled some CSS3 and it looks much nicer. Thank You!

Collectives™ on Stack Overflow

CSS Hover not working?

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related