Question

我有一个按钮，可用作导航栏的一部分。

我需要的是当用户将鼠标悬停在按钮上时，按钮文本会隐藏，按钮内会出现三个不同的链接。

初始按钮本身不应该附加链接，只是悬停在其上方后出现的三个选项。

希望这是有道理的;这是fiddle，可能会更清晰。

  <ul class="ulmenu">
  <li><a href=# class="a">Test</a></li>
  </ul>

Answer 1

最简单的，我建议如下：

<ul id="nav">
    <li>Navigation</li>
    <li><a href="#opt1">Option 1</a></li>
    <li><a href="#opt2">Option 2</a></li>
    <li><a href="#opt3">Option 3</a></li>
</ul>

使用以下CSS：

/* default display for all 'li' elements:
*/
#nav li {
    display: inline-block;
}

/* hides the 'li' elements that follow an 'li' element,
   hides the 'li:first-child' when the 'ul' is hovered:
*/
#nav li + li,
#nav:hover li:first-child {
    display: none;
}

/* shows the 'li' elements that follow other 'li' elements,
   when the 'ul' is hovered:
*/
#nav:hover li + li {
    display: inline-block;
}

JS Fiddle demo

关于Rygh2014留下的问题编辑，在下面的评论中：

这也适用于垂直菜单吗？我接受它我只需要切换内联块？

完全可以设置垂直菜单，只需从display: inline-block切换到display: list-item：

#nav,
#nav li {
    list-style-type: none;
}
#nav li {
    display: list-item;
}

#nav li + li,
#nav:hover li:first-child {
    display: none;
}

#nav:hover li + li {
    display: list-item;
}

JS Fiddle demo

请注意，我还将list-style-type属性设置为none，与任何其他display属性一样，没有标记（至少在Chrome下），而list-item属性1}}字形默认存在，如果你不想要它，你必须明确删除它。

CSS：onHover按钮显示多个链接

1 个答案: