Jquery:图像悬停时隐藏并显示div
我想知道是否有人能帮我找到一个解决方案，效果悬停在我的博客图片。这个想法是当我悬停一个图像时，你会看到一个带有图像信息的div，链接项目名称，日期，.
我所做的是，分配两个类执行div信息，类show和类hide，并且在开始时它与类hide连接。
然后使用jQuery/JavaScript，当img:hover删除类hide并添加类show时。
问题是，当我在图像上悬停时，会显示所有图像的信息。
我想知道是否有人能帮我把鼠标悬停的图像的信息呈现出来。
My：
<div id="content">
<img src="images/1.jpg" alt="Projecto 1" height="290" width="220" />
<div class="information hide">
<h2>Titulo</h2>
<p>Lorem Ipsun</p>
<a href="#" class="info">Read More</a>
</div>
</div>
<div id="content">
<img src="images/1.jpg" alt="Projecto 1" height="290" width="220" />
<div class="information hide">
<h2>Titulo</h2>
<p>Lorem Ipsun</p>
<a href="#" class="info">Read More</a>
</div>
</div>My CSS:
body div.information {
background: rgba(219, 49, 49, 0.52);
width: 220px;
height: 290px;
position: relative;
top: -290px;
}/*悬停效应*/
.hide {
display: none;
}
.show {
display: block;
}My JavaScript:
$('img').hover(function() {
$('.information').addClass("mostrar");
$('.information').removeClass("hide");
});顺便说一句，如果有人能告诉我，当图像不是悬停时，如何再次隐藏信息，我很感激。
回答 6
Stack Overflow用户
发布于 2012-01-26 11:05:52
那么更简单的事情呢：
$("div.content > img").hover(function() {
$(this).next(".information").show(); //hover in
}, function() {
$(this).next(".information").hide(); //hover out
});这样，使用jquery .show和.hide就不需要使用为悬停效果创建的css，因为这些jquery函数已经处理了属性。
Stack Overflow用户
发布于 2012-01-26 11:12:17
如果您不需要支持IE7和更低版本，那么只需使用http://www.w3.org/TR/css3-selectors/#adjacent-sibling-combinators选择器就可以做到这一点，而不需要JavaScript：
img + div.information {
display: none;
}
img:hover + div.information {
display: block;
}上面写着：“当div.information在img之后立即隐藏”，而“在悬浮的img之后立即显示div.information”。后一条规则是CSS后面的规则，而且(我认为)更具体的是，它在图像悬停时获胜，而不是在图像悬空时获胜。
实例化 -在现代浏览器中工作，包括IE8和更高版本。
Stack Overflow用户
发布于 2012-01-26 11:05:30
问题是，当我在图像上悬停时，会显示所有图像的信息。
我相信这是因为您引用的是泛型信息类，而不是单个div的id。相反，使用相邻的同级引用只获取您正在悬停的图像的信息。您可以使用:nth-child()选择器。
$("#content:nth-child(1)")而且，您不应该有多个具有相同id的div。
https://stackoverflow.com/questions/9023686
复制
腾讯云开发者
