jQuery show / hide / mouseenter问题

Question

我有四行文字，我想在每行右侧的mouseenter上显示特定图片。

我现在遇到的问题是所有四张图片同时显示。

我做错了什么？

http://jsfiddle.net/m97qebjr/10

jQuery的：

$(".thumb").hide();
$(".text" ).mouseenter(function() {
$(".thumb").show();
}).mouseleave(function() {
$(".thumb").hide();
});

Answer 1

$(".thumb")使用class thumb匹配所有元素。试试这个：

$(".thumb").hide();
$(".text").mouseenter(function () {
    $(this).siblings(".thumb").show();
}).mouseleave(function () {
    $(this).siblings(".thumb").hide();
});

更新了小提琴：http://jsfiddle.net/m97qebjr/13/

Answer 2

你根本不需要jQuery：http://jsfiddle.net/m97qebjr/16/

.thumb {
    display:none; /* added line */
    float:right;
    overflow:hidden;
    width:100px;
    height:100px;
}
.wrap:hover .thumb{ /* added rule */
    display:block;
}