javascript - 如何使切换元素在开始时显示为 block ，然后在悬停时切换？

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

我已经用解决方案更新了 fiddle :https://jsfiddle.net/qwknfekq/5/

想法是先显示元素，然后在“over”和“out”状态下处理悬停。

更新您还需要在悬停另一个按钮时隐藏 .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();
    });

});