悬停效果jquery答案

【问题标题】：hovering effect jquery悬停效果jquery
【发布时间】：2012-06-24 20:41:45
【问题描述】：

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

<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中的hover方法，你应该可以非常简单地设置列表项的可见性，只需通过

$('ul li')

.hover

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

),

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

});

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

【问题讨论】：

您的代码充满了语法错误。 jQuery 是 javascript，而不是一些伪 css 语言。
您的标记也有错误。第一个 ul 没有关闭
@Esailija 请保持冷静。并不是每个人都将编程视为某种生活方式。我正在尝试为我的网站创建一些功能。所以，把你的想法留给自己，回答我的问题

标签： jquery html css

【解决方案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，除非您有充分的理由这样做，否则不要包装元素。它会减慢您的网站在浏览器中的呈现速度。

【讨论】：

如果您将 ul 设置为隐藏。它不会显示菜单。换句话说，你需要一个 div

【解决方案2】：

您也可以尝试使用 hide() 命令。

this.hide();

或

this.show();

应该可以的^^

要让您自己的脚本正常工作，您应该更改以下内容：

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

进入这个：

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

【讨论】：