javascript - 如何使用 jquery 在鼠标悬停时显示 div？

Question

我有jsfiddle demo .

我想显示特定悬停的特定 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

我已经更新了你的 fiddle 。

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

改变了

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

到

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

这对你有用。