0

クリック可能な領域とクリックできない領域がある小さなWebアプリケーションを構築しています。ユーザーのマウスポインターがクリック可能な領域上にある間、その領域が強調表示され、ポインターが手に変わります。また、最初はクリックできない領域があり、ボタンがクリックされるとクリック可能になり、その逆もあります。私はtoggleClassこれらの分野でこの方法を使用しています。mouseoverしかし、私はこれらの特定の領域でとmouseoutメソッドを使用できないようです。

ボタンをクリックすると、[回答を表示]タブと[送信]タブにカーソルを合わせたときにマウスポインタと背景色を変更し、もう一度クリックすると、デフォルトの状態に戻します。 、ポインタを変更することしかできません。

HTML

<div id="help" class="hover">Help</div>
<div id="switchplayer" class="hover">Switch to Two player</div>
<div id="showanswer">Show Answer</div>
<div id="submit">Submit</div>
<div id="start" class="hover">Start</div>

<button>Click me!</button>

jQuery $（'button'）。click（function（）{$（'＃showanswer、＃submit'）。toggleClass（'hover'）;}）;

$('.hover').mouseover(function() {
   $(this).css('background-color','red'); 
}).mouseout(function() {
       $(this).css('background-color',''); 
});

CSS

div {
border:1px solid black;
}

.hover {
    cursor:pointer;
    cursor:hand;
}
4

2 に答える 2

2

あなたはこの単純なCSSでそれを行うことができます：

.hover:hover {
    background-color: red;
}

http://jsfiddle.net/cT3M9/3/

その後、期待どおりに機能します。

ただし、このタスクにJavaScriptが必要な場合は、onイベントを委任するために使用する必要があります。

$(document).on({
    mouseover: function() {
        $(this).css('background-color','red');
    },
    mouseout: function() {
        $(this).css('background-color', '');
    }
}, '.hover');

http://jsfiddle.net/cT3M9/6/

于 2013-03-16T13:56:52.110 に答える
1

dfsqが指摘しているように、これを行う最も簡単な方法は、CSSを使用することです。ただし、コードが機能しない理由は、メソッドmouseoverとメソッドが、それらのメソッドが実行されたときにクラスmouseoutを持つ要素にのみ適用されるためです。イベントハンドラーは、元の選択基準を満たす新しい要素にさかのぼって添付されることはありません。後でそのクラスを取得する要素にイベントハンドラーコードを適用するには、次のように.onメソッドのバリエーションを使用します。hover

$('body').on('mouseover', '.hover', function() {
    $(this).css('background-color','red'); 
}).on('mouseout', '.hover', function() {
    $(this).css('background-color',''); 
});
于 2013-03-16T14:05:39.710 に答える