CSS懸停不工作？

我在菜單上有一個簡短的描述，我不想顯示，直到將鼠標懸停在菜單上。我無法得到這個工作，不知道爲什麼。在我的例子中，預期的結果是字My Work應該隱藏最初，然後在懸停字My Work變得可見。懸停不起作用。CSS懸停不工作？

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

我不介意使用jQuery如果這是一個更好的解決方案。

來源

2013-02-10 L84

試試這個：ul.sdt_menu li .sdt_wrap：hover .sdt_descr – mika 2013-02-10 23:10:48

@mika - 這是行不通的。 – L84 2013-02-10 23:13:27

我沒有看到我的工作有沒有或沒有在Chrome中懸停 – 2013-02-10 23:13:32

取而代之的是：

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-10 23:24:14

謝謝，那是我期望的結果。我實際上從@ozk帶出一個不透明的想法，撒了一些CSS3，看起來好多了。謝謝！ – L84 2013-02-10 23:38:00

這是奇怪的行爲（在用戶將它徘徊之前隱藏了某些內容）。它本質上是一個隱藏功能，因此可能是用戶體驗問題。

除此之外，該元素未被註冊爲「懸停」，因爲它被隱藏。您可以使用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-10 23:18:13 ozk

謝謝，這確實有效，但是，我意識到我的部分問題。您必須將鼠標懸停在元素本身上，而不僅僅是菜單。感謝用戶體驗建議。在上下文中，它運作良好。 – L84 2013-02-10 23:21:52

CSS懸停不工作？

回答

相關問題