Jquery offホバー？

Question

私はここにこのコードを持っている：

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

ユーザーが、別の要素が表示され、この要素の上に置いた

は、どのように私はあなたがた.Fa要素をオフに置くと、この要素が消えて作るのですか？

Answer 1

hoverは2コールバックを受け入れます。マウスが要素を離れたときに、第2の1が呼び出されます。

$('.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コールバックを使用して特異性を可能にし、同様に。