Question

当我翻转下拉子菜单时，如何让标签处于悬停模式。它需要javascript还是只能在CSS上完成？

 <li id="anchor" class="title dropdown"><a href="#">Main Tab</a>
                <div class="column">                    
                    <ul>
                        <li class="subtitle">Button 1</li>
                        <li class="subtitle">Button 2</li>
                        <li class="subtitle">Button 3</li>
            </div>        
        </li>

Answer 1

你可以用CSS做，但需要JS用于较旧的浏览器（即6），例如

li .column{
   display: none;
}

li:hover .column{
   display: block
}

IE6仅支持悬停在锚标签上，因此需要JS。

Answer 2

正如matpol建议的那样，您可以使用css来执行此操作，并使用css hover fix在IE中对其进行排序。

作为旁注，你不需要那里的div，你可以通过设置嵌套的li元素来完成你需要做的所有样式（你也需要关闭第二个ul）。我猜它只是一个快速完成的代码片段，但我想我会把它提起来:)）

更新

如果下拉列表有多大，你不应该需要该级别的div（如果需要，可以将它们放在<li>中）。

像这样......

<li id="anchor" class="title dropdown"><a href="#">Main Tab</a>
  <ul class="column">
    <li class="subtitle">Button 1</li>
    <li class="subtitle">Button 2</li>
    <li class="subtitle">Button 3</li>
  </ul>        
</li>

/* styles */


li#anchor:hover {
  /* Styles for tab hover state, will be in effect when you're hovering over any child ul/li elements */
}

li#anchor ul.column {
  display: none; 
  /* Styles for this ul, float, position etc */
}

li#anchor:hover ul.column { 
  display: block;
}

它未经测试，但我做了更多这些比我想要记住：P

当鼠标悬停在下拉菜单上时，选中鼠标悬停模式

2 个答案: