2

次の方法で作業したいトグルを作成しました。

ここに画像の説明を入力

基本的に、ユーザーは「すべての実行」にカーソルを合わせると、「すべて」という単語の代わりにトグルが表示されます。ユーザーはそれを "Last N" に切り替え、値を入力し、マウスを離して調整を確認できます。

トグルを作成し、ホバーすると表示されますが、2 つの問題があります。

  • インラインで表示されていますが、まだ「すべて」という単語が表示されています...これを表示しないようにする方法がわかりません。

  • トグルをクリックしようとすると隙間ができて消えてしまい使えません。

ソリューションフィドル。

解決：

以下のコメントに従って、マウスオーバーをキャプチャするためにラッパー 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>
4

2 に答える 2

2

全体を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/

于 2012-10-25T14:44:03.063 に答える
1 
$('.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/

于 2012-10-25T14:49:05.873 に答える