jQuery关闭悬停？

Question

我在这里有此代码：

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

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

Answer 1

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

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

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

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

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