ここで私が開発していたスクリプトは、リンクのリストであり、各リンクのポップアウトにはリンクに関する詳細情報が含まれていました。この質問の目的は、アイコンの上にカーソルを置いてポップアウトを開く方法を理解し、マウスがアイコンを離れてポップアウトに入った後も開いたままにすることでした。
問題の一部は、同じページに同じ種類のオブジェクトのインスタンスが多数あったため、解決策は一般的であり、ホバーされたアイコンに最も近いポップアウトをトリガーする必要がありました。
HTML:
<li class="foo">
<span class="icon"></span>
<a href="">Title</a>
</li>
<li class="subfoo">
Pop-out contents
</li>
JavaScript:
/*setup of variables and functions to be used*/
function clear(){ //set up a function to hide all pop-outs
$('.foo').each(function(){
$(this).next('.subfoo').hide()});}
var popoutHover = false; //initialize switch variable for following function:
$('.subfoo').mouseenter(function(){
popoutHover = true;}); //Set the variable to 'true' if the mouse is hovering over a pop-out
$('.subfoo').mouseleave(function(){
popoutHover = false; //Set the variable to 'false' and hide pop-outs if the mouse leaves
clear();
});
/*The main functionality*/
$('.icon').hoverIntent(function(){ //Hover over the icon for a link
clear(); //Hide open pop-outs
$(this)
.closest('.foo') //Select the link next to the icon
.siblings('.subfoo') //Select the pop-out for the link
.slideDown(240)}, //Open the pop-out
function(){//If the mouse leaves the icon
if (!popoutHover){ //And it is not hovering over a pop-out
$(this)
.closest('.foo') //Select the link
.siblings('.subfoo') //Hide the pop-out
.hide()}}
);
現時点で説明できるよりも優れている可能性があるため、ここに簡単なフィドルがあります:
https://jsfiddle.net/kuzvgqkz/1/