Jquery关闭？

Question

我这里有这个代码：

$('.fa').hover(function(){
    $('#hiddenStuff').show();    
});

当用户将鼠标悬停在此元素上时，会出现另一个元素，当您将.fa元素悬停时，如何使此元素消失？

Answer 1

hover接受2次回调。当鼠标离开元素时调用第二个：

$('.fa').hover(function(){
      $('#hiddenStuff').show();
}, function(){
      $('#hiddenStuff').hide();
});

附注：根据您的HTML，您可以避免在此处使用javascript：

div {
    padding: 20px;
}
.fa {
    background: lightblue;
}
#hiddenStuff {
    display: none;
    background: yellow;
}
.fa:hover ~ #hiddenStuff {
    display: block;
}

<div class=fa>FA (move the mouse over here)</div>
<div id=hiddenStuff>hiddenStuff</div>

Answer 2

使用toggle()方法，如下所示。

$('.fa').hover(function(){
    $('#hiddenStuff').toggle();
});

#hiddenStuff{
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="fa">Hover</span>
<br/>
<span id="hiddenStuff">Show/Hide</span>

Answer 3

可选地

$('.fa').mouseenter(function(){
//what you want on mouse enter
}

$('.fa').mouseleave(function(){
//what you want on mouse exit
}

允许特异性，如果您只使用.hover（），则允许使用.hover回调。