如何使用jquery在鼠标悬停上显示div？

Question

我有jsfiddle演示.

我想显示特定悬停的特定div悬停.我已经制作了功能,它将在悬停时显示div,但它不起作用.

我很困惑,如何为每个标签制作一个功能.现在我只做了一个功能.

代码:

<a class="cart" href="#"> show </a><br>
<a class="cart1" href="#"> show1 </a><br>
<a class="cart2" href="#"> show2 </a><br>

<div class="laptop" style="position: absolute;z-index: 1;">
    laptop
</div>
<div class="mobile" style="position: absolute;z-index: 1;">
    mobile
</div>
<div class="shoes" style="position: absolute;z-index: 1;">
    shoes
</div>

CSS:

.laptop{
    display: none;              
    min-height: 400px;
    width: 400px:
    position:absolute;
    background-color: black;               
}
.mobile{
    display: none;                  
    min-height: 200px;
    width: 200px:
    position:absolute;
    background-color: blue;            
}
.shoes{
    display: none;                  
    min-height: 300px;
    width: 200px:
    position:absolute;
    background-color: red;             
}

JS:

$(document).ready(function () {
    $(document).on('mouseenter', '.cart', function () {                       
        $(this).next(".laptop").show();

    }).on('mouseleave', '.cart', function () {
        $(this).next(".laptop").hide();
    });
});

Answer 1

我已经更新了你的小提琴.

http://jsfiddle.net/K2RAt/1/

变

$(this).next(".laptop").hide();

至

$(".laptop").hide();

这对你有用.