fiddle >> http://jsfiddle.net/8bwSD/1/
我正在使用 HTML5、CSS3 和 jQuery 制作一个网站。
我有一个图片库。所有图像中都有一个信息框(带有一些样式的简单 div)。
将鼠标悬停在信息框上时,会显示相关信息。
下面是显示/隐藏(滑入/滑出)相关信息的 jQuery:
$(".info").hover(function(){
$(".cap2").slideDown(400);
}, function(){
$(".cap2").slideUp(300);
});
图像信息位于 HTML 内。
“信息”框(将悬停在其上)也在 HTML 内。
目前,图像信息和信息框有自己的 CSS 样式,因此每当我将鼠标悬停在一个信息框上时,就会同时显示所有图像的信息。
所以我的问题是:
有没有一种方法可以创建干净/简单的代码来显示每个图像的相关信息,而不必为每个信息框创建单独的 CSS 样式和 jQuery 代码?
非常感谢任何帮助。谢谢!
最佳答案
.hover(function () {
$(this).next(".cap2")
.show();
}, function () {
$(".cap2")
.hide();
});
更新
正如 Milimetric 指出的,您也可以在悬停功能上使用 next
。这应该会提高性能,因为 jQuery 不需要查找 dom 中的所有 .cap2
元素,只需查找 next
元素来隐藏它。
$(document).ready(function () {
$(".info").hover(function () {
console.log(this);
$(this).next(".cap2").show();
}, function () {
$(this).next(".cap2").hide();
});
});
Milimetric的 fiddle 供引用
jsfiddle.net/8bwSD/4
关于当鼠标悬停在其他特定元素上时,jQuery 显示不同的元素(div),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20591165/