如何在開始時使切換的元素出現塊，然後切換懸停？

Question

我有一個4項目的清單，每個項目切換顯示飛出。我希望第一個項目在加載時切換（打開），然後懸停使它保持打開狀態，但不停歇會關閉它。 （後面徘徊重新打開它，彷彿它是一個切換。）

我有我的列表中設置了這樣的：

<ul> 
<li class="targ">Target</li> 
<li class="conn">Connect</li> 
<li class="conv">Convert</li> 
<li class="opti">Optimize</li> 
</ul> 

和jQuery來切換元素：

$(function() { 
$('.targ, .target-popup').hover(function() { 
    $('.target-popup').toggle(); 
}); 

$('.conn, .connect-popup').hover(function() { 
    $('.connect-popup').toggle(); 
}); 

$('.conv, .convert-popup').hover(function() { 
    $('.convert-popup').toggle(); 
}); 

$('.opti, .optimize-popup').hover(function() { 
    $('.optimize-popup').toggle(); 
}); 

}); 

以下是JS Fiddle的工作。

感謝您的幫助！

Answer 1

我已經更新與解決方案的小提琴：https://jsfiddle.net/qwknfekq/5/

的想法是首先顯示的項目，然後處理兩個「過度」和「出」的狀態懸停。

UPDATE 您還需要隱藏.target-popup你懸停另一個按鈕的任何時間。

$(function() { 
    $('.target-popup').show(); 
    $('.targ, .target-popup').hover(function() { 
      $('.target-popup').show(); 
     }, 
     function() { 
      $('.target-popup').hide(); 
     }); 

    $('.conn, .connect-popup').hover(function() { 
     $('.target-popup').hide(); 
     $('.connect-popup').toggle(); 
    }); 

    $('.conv, .convert-popup').hover(function() { 
     $('.target-popup').hide(); 
     $('.convert-popup').toggle(); 
    }); 

    $('.opti, .optimize-popup').hover(function() { 
     $('.target-popup').hide(); 
     $('.optimize-popup').toggle(); 
    }); 

}); 

Answer 2

將$('.target-popup').show()添加到您的腳本的底部或通過CSS處理您的隱藏/顯示，然後直接將正確的類應用於HTML。

Answer 3

這是我會怎麼做

$(function() { 
$('.targ, .target-popup').mouseenter(function() { 
    $('.target-popup').show(); 
}); 
$('.targ, .target-popup').mouseleave(function() { 
    $('.target-popup').hide(); 
}); 
$('.conn, .connect-popup').hover(function() { 
    $('.connect-popup').toggle(); 
}); 

$('.conv, .convert-popup').hover(function() { 
    $('.convert-popup').toggle(); 
}); 

$('.opti, .optimize-popup').hover(function() { 
    $('.optimize-popup').toggle(); 
}); 

$(".target-popup").show(); 
});