取消隐藏<img/>：悬停

Question

是否可以默认隐藏图片并在:hover取消隐藏？我尝试使用visibility属性，但不能隐藏不可见的元素。

Answer 1

如果使用显示或可见性，则元素不在那里，因此您不能将鼠标悬停在其上。试试 opacity:0; 。你可以用css：

来做

.img { opacity:0; }
.img:hover { opacity:1; }

Answer 2

我意识到你特意询问了jquery，但是你可以用css做你想要的事情，尽管你可能不得不使用opacity：0而不是display：none来隐藏图像。

您可以使用css悬停事件。首先将类应用于您的图像：

<img src="theimage.jpg" class="hidden-image"/>

在你的css中，你可以使用class和css hover事件在光标在图像上时显示图像：

.hidden-image {
   opacity: 0;
}

.hidden-image:hover {
   opacity:1;
}

这是一个jsfiddle：http://jsfiddle.net/fZd7J/

Answer 3

直接你不能鼠标悬停/悬停隐藏的图像，这对于visibility:hidden;或display:none;是不可能的，但你可以有一些技巧来做到这一点。

使用css

将opacity: 0;应用于图片，并且：悬停更改opacity:1;

使用js

为图片创建一个父<div>，并mouseover向该div申请display:block;图片。

工作小提琴 Click here