javascript Jquery：当图像悬停时隐藏和显示一个div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9023686/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jquery: Hide and show a div when image is hover
提问by Mikejolz
I wonder if someone can help me find a solution to an effect hover to an image in my blog. The idea was when I hover an image, you see a div with the image information, link project name, date,...
我想知道是否有人可以帮助我找到解决方法来解决我博客中图像悬停效果的问题。这个想法是当我将鼠标悬停在图像上时，您会看到一个带有图像信息、链接项目名称、日期...
What i have done is, assign two classes do the div information, class showand class hide, and at the beginning it apears with a class hide.
我所做的是，分配两个类来处理 div 信息， classshow和 class hide，并且在开始时它与一个 class 一起出现hide。
Then with jQuery/JavaScript when the img:hoverit remove the class hideand add a class show.
然后使用 jQuery/JavaScript 当img:hover它删除类hide并添加一个类时show。
the problem is, when i do hover to a image, appears the information of all images.
问题是，当我将鼠标悬停在图像上时，会出现所有图像的信息。
I am wonder if some can help me to make just appear the information of the image that the mouse are hover.
我想知道是否有人可以帮助我只显示鼠标悬停的图像信息。
My HTML:
我的 HTML：
<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:
我的 CSS：
body div.information {
background: rgba(219, 49, 49, 0.52);
width: 220px;
height: 290px;
position: relative;
top: -290px;
}
/* HOVER EFFECT */
/* 悬停效果 */
.hide {
display: none;
}
.show {
display: block;
}
My JavaScript:
我的 JavaScript：
$('img').hover(function() {
$('.information').addClass("mostrar");
$('.information').removeClass("hide");
});
And by the way, if some one can tell me, how to hide the information again when the image is not hover, I appreciate to.
顺便说一句，如果有人能告诉我，当图像没有悬停时如何再次隐藏信息，我很感激。
回答by Adam Rackis
What about something simpler:
更简单的事情呢：
$("div.content > img").hover(function() {
$(this).next(".information").show(); //hover in
}, function() {
$(this).next(".information").hide(); //hover out
});
This way, using jquery .showand .hideyou don't need to use the css which you created for the hover effect, since these jquery's functions already take care of the attributes.
这样一来，使用jQuery .show和.hide你不需要使用您的悬停效果产生的CSS，因为这些jQuery的功能已经采取属性的照顾。
回答by T.J. Crowder
If you don't need to support IE7 and lower, you can do this with just CSS using the adjacent sibling combinatorselector, no JavaScript required:
如果您不需要支持 IE7 及更低版本，则可以使用相邻的兄弟组合器选择器仅通过 CSS 来完成此操作，无需 JavaScript：
img + div.information {
display: none;
}
img:hover + div.information {
display: block;
}
That says: "Hide div.informationwhen it's immediately after an img" but "Show div.informationwhen it's immediately after a hoveredimg". The latter rule being both later in the CSS and (I think) more specific, it wins when the image is hovered and not when it isn't.
这就是说：“div.information在紧随其后时隐藏img”但“div.information在悬停后立即显示img”。后一条规则在 CSS 中后期出现并且（我认为）更具体，当图像悬停时它会获胜，而不是当它不是时。
Live example- Works in modern browsers, including IE8 and higher.
现场示例- 适用于现代浏览器，包括 IE8 及更高版本。
回答by the_skua
the problem is, when i do hover to a image, appears the information of all images.
问题是，当我将鼠标悬停在图像上时，会出现所有图像的信息。
I believe this is because you're referencing the generic information class, not the id of a single div. Instead, use the adjacent sibling reference to get only the information for the image you're hovering. You could use the :nth-child() selector.
我相信这是因为您引用的是通用信息类，而不是单个 div 的 id。相反，使用相邻的同级引用仅获取您悬停的图像的信息。您可以使用 :nth-child() 选择器。
$("#content:nth-child(1)")
Also, you shouldn't have multiple divs with the same id.
此外，您不应该有多个具有相同 ID 的 div。
回答by James Montagne
$(this).parent().find('.information').addClass("mostrar")
.removeClass("hide");
This will grab the parent of the individual img which is being hovered, search within the parent and find the .informationspecific to that img.
这将获取正在悬停的单个 img 的父级，在父级中搜索并找到该.informationimg的特定内容。
回答by Sagar Patil
Try this:
试试这个：
$('img').hover(function(){
$(this).siblings('.information').removeClass('hide').addClass('mostrar').addClass('show');
}, function(){
$(this).siblings('.information').removeClass('show').removeClass('mostrar').addClass('hide');
});
回答by ShankarSangoli
Try this
试试这个
$('img').hover(function() {
$('.information').addClass("hide")
$(this).next().addClass("mostrar").removeClass("hide");
}, function(){
$('.information').addClass("hide").removeClass("mostrar")
});
