javascript - 我现在将鼠标悬停在元素上，一旦鼠标移出，我想将其隐藏。我该怎么做呢？

我正在使用以下HTML：

<div class="menu">
    <ul>
        <li><a href="#" name="div1" >Home</a></li>
        <li><a href="#" name="div2" >Page1</a></li>
        <li><a href="#" name="div3" >page2</a></li>
        <li><a href="#" name="div4" >page3</a></li>
    </ul>
</div>

<div>

    <div class="div1" style="display:none">
        Test
    </div>

    <div class="div2" style="display:none">
        Test...
    </div>

    <div class="div3" style="display:none">
        Test 1
    </div>

    <div class="div4" style="display:none">
        Test 2
    </div>

</div>

以及以下jQuery：

$('a').mouseover

(function() {
    var divname = this.name;
    $("." + divname).show("slow");
});

JsFiddle

我希望能够将鼠标移出并隐藏起来，直到我离开不在“ a”上显示的框。我该怎么做呢？

最佳答案

哇，抱歉，我猜我最初不理解这个问题，请参阅下文。这会将mouseout绑定到您刚显示的div，因此它将一直保留直到您移出它，而不是a。

Live Demo

$('a').mouseover(function() {
    var divname = this.name;
    $("." + divname).show("slow").mouseout(function(){$(this).hide('slow')});
});

我建议您将标记更改为将div作为li的子级，或者至少将它们置于悬停的a的附近，因为如果您注意到可以将鼠标悬停在所有a元素上，但请勿将其移出导致他们留下的div。然后，您可以执行以下操作：

$('li').hover(function() {
    var divname = this.name;
    $("." + divname).show("slow");
},function(){
    var divname = this.name;
    $("." + divname).hide("slow");
});