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

Question

我正在使用以下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”上显示的框。 我该怎么做呢？

Answer 1

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

现场演示

$('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");
});

Answer 2

http://jsfiddle.net/genesis/r739G/1/

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

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

Answer 3

加上这个...

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