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

Question

我创建了一个切换，我想通过以下方式工作：

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

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

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

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

解决方案小提琴。

解决方案：

根据下面的评论，我必须添加一个包装 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()
});

这是小提琴：

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

Answer 2

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


.toggle:{display:none;}
.toggle:hover {display:inline;}

我认为这行不通？http://jsfiddle.net/calder12/MeVX8/8/