Question

为什么悬停效果不起作用？

<ul id="main-nav">
   <li> 
   <a href="#" style=":hover .sub-nav-1 {display: inline-block;}">test</a>
      <ul class="sub-nav-1" style="display:none">
      //some other lis
      </ul>
   </li> 
</ul>

Answer 1

内联样式通常是一种糟糕的策略。

此外，您在内联声明中添加的样式只能定义为您添加内联样式的元素的样式。您无法添加选择器。

要完成您的样式声明要执行的操作，至少应该在页面的<style>元素内的<head>块中添加样式（或更好）但是，使用CSS Stylesheet）：

<style>
    #main-nav a:hover .sub-nav-1 {
        display: inline-block;
    }
</style>

<ul id="main-nav">
   <li> 
   <a href="#">test</a>
      <ul class="sub-nav-1" style="display:none">
      //some other lis
      </ul>
   </li> 
</ul>

Here is a page讨论了添加样式的不同方法。

Answer 2

也许你应该使用javascript：

<a onmouseover="this.style.display='inline-block';" onmouseout="this.style.display='inline';">test</a>

无论如何，像这样对CSS进行编码并不是以后编辑的正确方法。

悬停效果不适用于style =“：hover”

2 个答案: