0

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.

4

2 に答える 2

3

これは奇妙な動作です (ユーザーがホバーするまで何かを非表示にする)。これは本質的に隠された機能であるため、UX の問題になる可能性があります。

それ以外は、要素が非表示になっているため、「ホバー」として登録されていません。opacity(およびその IE 固有の対応する) を使用filter:alphaして、ホバーするまで要素を完全に透明にし、目的の効果を得ることができます。

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);
}

おそらくうまくいくはずです。

于 2013-02-10T23:18:13.003 に答える
1

これの代わりに：

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

これを置く：

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

これにより、ユーザーが li 要素にカーソルを合わせたときに説明を表示できます。http://jsfiddle.net/2Wrj7/3/

于 2013-02-10T23:24:14.937 に答える