Javascript jQuery mouseover函数不起作用

我对jQuery有一个问题。我试图使图像在onmouseover事件中出现（或淡入），在onmouseout事件中消失（或淡出）。我拥有的HTML是：

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

JavaScript如下所示：

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

但是这个代码不起作用。我正在努力理解到底是什么错了，但我无法解决它。我也在JSFIDLE中测试了代码，没有结果。我还尝试了hover（）函数，但没有成功

你能告诉我我做错了什么并提出解决办法吗？谢谢

---

Francesco可见性不是HTML属性；这是一个CSS特性。尝试使用css（）而不是attr（）。

在此处查找工作示例：

如果在不可见元素上触发事件，您将遇到问题，最好将事件附加到。包装器：

你的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>

实际上，正确的方法是使用函数。
大概是这样的：

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

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

或者使用/，如下所示：

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

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

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

干杯
 您还可以使用
悬停（function（）{//onmouseover}，function（）{//onmouseout}）是的，我会改为使用：
$（this）.css（“display”，“block”）
和
$（this.css（“display”，“none”）
您可以将
不透明度
更改为0，而不是将
可见性
更改为0。这不是完全相同的行为，但这是一种变通方法。显然鼠标盖对看不见的物体不起作用。。。我不知道。如果更改CSS以使div.left最初可见，则在鼠标移出时它会工作一次，然后停止工作。所以我想Sylvain的变通方法是一个很好的选择。@Sylvain Thrd:谢谢，你的例子非常有效。显然，设置不透明度对于脚本来说是一个消耗较少的操作，因为事件（onmouseover和onmouseout）的响应时间比设置可见性快！你知道有什么具体原因吗？谢谢。您的解决方案可行，但如果我是鼠标悬停者，图像有时会卡在“可见性：隐藏”evne中。它取决于包装的大小吗？是的，基本上你不需要它有固定的宽度，高度更新的fiddle:，请接受如果它有助于解决你的问题，那么你也可以使用：hover选择器用纯CSS（根本没有Javascript）来实现这一点。