悬停时出现自定义切换

Question

我创建了一个切换按钮，我希望以下列方式工作：

基本上，用户将鼠标悬停在“所有运行”上，切换将显示在“全部”字样的位置。然后，用户可以将其切换为“Last N”，输入一个值，然后将鼠标移开并查看其调整。

我已经建立了切换并且它在悬停时显示，但我有两个问题：

• 它显示内联，但仍然显示“全部”一词......我不知道如何让它不显示。

• 我无法使用切换功能，因为当我因为间隙而点击它时它会消失。

SOLUTION FIDDLE.

SOLUTION：

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