针对jQuery悬停的多个元素

Question

我有多个称为图像包装的div，当我将鼠标悬停在其中一个上时，我想显示特定图像包装内的元素，在这种情况下，链接和图像在名为item的p标签内（而不是全部显示）。我搜查了网络，我发现大部分答案都使用$（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'); 
}); 

它会发现，在特定.image-wrap

Answer 3

的.item你可以做这样的事情。

$('.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)启动和使用DOM traversal methods选择相关元素。在你的情况$(this).children()应该做的伎俩，或$(this).find('.item')：

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

也没有必要浪费时间设置的CSS属性的时候直接jQuery提供.show()和.hide()。

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

（请注意，你需要在你的div没有被隐藏或没有什么可以将鼠标悬停在其他内容）