如何使切换的元素在开始时显示为块，然后在悬停时切换

How can I make a toggled element appear block at start, then toggle on hover?

本文关键字：然后 悬停 显示 何使切 元素 开始时      更新时间：2023-09-26

我有一个包含 4 个项目的列表，每个项目切换以显示一个飞出。我希望在加载时切换（打开）第一个项目，然后悬停使其保持打开状态，但取消悬停将关闭它。（然后悬停 re 将其打开，就好像它是一个切换开关一样。

我的列表设置如下：

<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小提琴。

感谢您的帮助！

我已经用解决方案更新了小提琴：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();
    });
});

这是我的做法

$(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();
});

将$('.target-popup').show()添加到脚本底部或通过 CSS 处理隐藏/显示，然后将正确的类直接应用于 HTML。

相关文章：