Question

我遇到了jQuery的问题。我试图在onmouseover事件上显示（或淡入）图像并在onmouseout事件上消失（或淡出）。我拥有的HTML是：

<div class="wrapper">
<img id="mainImg" src="..." />
</div>

CSS：

#mainImg
{
visibility:hidden;
}

JavaScript如下：

$("#mainImg").mouseover(function () {
    $(this).attr("visibility", "visible");
  }).mouseout( function () {
    $(this).attr("visibility", "hidden");
  });

但是这段代码不起作用。我正在努力去理解什么是错的，但我无法解决它。我在JsFiddle中测试了代码但没有结果。我也试过hover（）函数但没有成功。

请您告诉我我做错了什么并提出解决方案？感谢

弗朗西斯

Answer 1

可见性不是HTML属性;这是一个CSS功能。尝试使用css（）而不是attr（）。

Answer 2

在此处查找工作示例： http://jsfiddle.net/ezmilhouse/MegL9/1/

如果在不可见元素上触发事件，你会遇到问题，更好地将事件附加到.wrapper：

你的js：

$(".wrapper").mouseover(function () {
    $('img', this).css("visibility", "visible");
});

$(".wrapper").mouseout(function () {
    $('img', this).css("visibility", "hidden");
});

你的HTML：

<div class="wrapper">
    <img id="mainImg" src="http://www.google.com/images/logos/ps_logo2.png" />
</div>

Answer 3

实际上，正确的方法是使用.toggle()函数。像这样：

$("#mainImg").mouseover(function () {
    $(this).toggle();
  }).mouseout( function () {
    $(this).toggle();
  });

或使用.hide() / .show()，如下所示：

$("#mainImg").mouseover(function () {
    $(this).hide();
  }).mouseout( function () {
    $(this).show();
  });

这样做很酷的一点是你可以为可见/不可见的过渡指定动画。

干杯！

jQuery鼠标悬停功能不起作用

3 个答案: