自定義切換出現在懸停

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/