jquery - 悬停时出现自定义切换

Question

我已经创建了一个我想按以下方式工作的切换:

基本上，用户会将鼠标悬停在“所有运行”上，切换按钮将出现在“全部”一词的位置。然后用户可以将其切换到“最后 N”，输入一个值，然后将鼠标移开并查看他们的调整。

我已经构建了切换开关，它在悬停时显示，但我有两个问题:

• 它正在显示内联，但仍然显示“全部”一词...我不确定如何让它不显示。

• 我无法使用切换按钮，因为当我尝试单击它时它会因间隙而消失。

SOLUTION FIDDLE.

解决方案:

根据下面的评论，我必须添加一个包装器 div 来捕获鼠标悬停。

<div class='wrapper'>
    <div class='runType'>All </div>
    <div class='toggle'>
        <div class='all active'>All</div>
        <div class='last'>Last <input class='in' type='text' size='1' placeholder='N' /></div>   
    </div>
    <div class='runs'>runs</div>
</div>

Answer 1

您需要将整个东西包装在一个 div 中，然后将鼠标悬停在包装器上，同时添加隐藏命令以隐藏“全部”字样:

<div id='wrapper'>
<div class='allText'>All </div>
<div class='toggle'>
    <div class='all active'>All</div>
    <div class='last'>Last <input class='in' type='text' size='1' placeholder='N' />       </div>   
</div>
<div class='runs'>runs</div>
</div>

JS:

$('#wrapper').mouseover(function() {
$('.toggle').css('display','inline');
$('.allText').hide();
}).mouseleave(function() {
   $('.toggle').hide();
   $('.allText').show()
});

这是 fiddle :

http://jsfiddle.net/MeVX8/10/