Question

我有多个div，称为image-wrap，当我将鼠标悬停在其中一个上时，我想在特定的图像包装内显示元素，在这种情况下，p标签内的链接和图像称为item（而不是显示所有这些）。我搜索了网络和大多数答案我发现说使用$（this）。我不想影响图像包装，所以$（this）不起作用。

html：

<div class="image-wrap">
<p class="item"><span><a href="#">Link</a><img src=" "></span></p>
</div>

<div class="image-wrap">
<p class="item"><span><a href="#">Link</a><img src=" "></span></p>
</div>

<div class="image-wrap">
<p class="item"><span><a href="#">Link</a><img src=" "></span></p>
</div>

jQuery：

<script>
$('.image-wrap').hover( 
function() {
$('.item').css('display','block');
},
function() {
$('.item').css('display','none');
});
</script>

Answer 1

解决此特定问题的最佳方法是使用CSS，而不是javascript。请改为考虑以下CSS：

.image-wrap .item {
  display: none;
}

.image-wrap:hover .item {
  display: block;
}

Answer 2

使用

$('.image-wrap').hover( 
function() {
$('.item',this).css('display','block');
},
function() {
$('.item',this).css('display','none');
});

它会在特定.item

中找到.image-wrap

Answer 3

你可以这样做。

$('.image-wrap').hover( 
function() {
  $(this).children('.item').css('display','block');
},
function() {
  $(this).children('.item').css('display','none');
});

或

$('.image-wrap').hover( 
function() {
  $(this).children('.item').show();
},
function() {
  $(this).children('.item').hide();
});

Answer 4

“我不想影响图片包装，所以$（this）不起作用。”

你做需要使用$(this) - 我们的想法是从$(this)开始，并使用DOM traversal methods来选择相关元素。在你的情况下，$(this).children()应该做，或$(this).find('.item')：

$('.image-wrap').hover( 
function() {
   $(this).children().show();
},
function() {
   $(this).children().hide();
});

当jQuery提供.show()和.hide()时，也无需直接设置CSS属性。

演示：http://jsfiddle.net/KsqaW/

（请注意，您需要div中未隐藏的其他内容，或者没有任何内容悬停在上面。）

使用jQuery hover定位多个元素

4 个答案: