Question

我有以下无序列表，我想在不悬停时隐藏，并在悬停时显示。

<ul class="viewer">
<li><a href=".html">Menu</a></li>
<div>
<ul>
<li><a href=".html">1</a></li>
<li><a href=".html">2</a></li>
<li><a href=".html">3</a></li>
<li><a href=".html">4</a></li>
<li><a href=".html">5</a></li>
</ul>
</div>

css如下

div ul li {visibility: hidden;}

如您所见，我已将列表项包装在div中，并将可见性设置为隐藏。

现在根据jQuery中的悬停方法，您应该可以在非常简单的基础上将列表项的可见性设置为仅通过

显示

$('ul li')

.hover

(function()
{
.css("visibility","visible");
}

),

(function()
{
.css("visibility","hidden");

});

让我有点不确定的是$（'ul li'）。而且，我可以在悬停效果中添加一个css功能吗？我不确定我是否应该像我一样将css添加到函数中。所有提示都表示赞赏。

Answer 1

您不需要jQuery甚至JavaScript，只需使用CSS伪类:hover即可。想象一下没有启用JavaScript的用户......

ul li{
  // style of your list
  visibility: hidden;
}

ul li:hover{
  // style of your list when hovered
  visibility: visible;
}

此外，您不需要将列表包装到div这里，除非您有充分的理由这样做，否则请不要包装元素。它会降低浏览器中网站的呈现速度。

Answer 2

您也可以尝试使用hide（）命令。

this.hide();

或

this.show();

应该有效^^

让你自己的脚本工作，你应该改变这个：

.css("visibility","visible");

进入这个：

this.css("visibility","visible");

悬停效果jquery

2 个答案: