jQuery鼠标悬停功能不起作用

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().