1

ホバーした場合に要素を強調表示する次のコードがあります。

$('*').hover(function() {
  $(this).addClass('over'); 
}, function() {
  $(this).removeClass('over');
});

問題は、選択範囲の周りのすべての要素も強調表示されることです。例を見てください。JsFiddlespanにカーソルを合わせると、pとbody/htmlが強調表示されます。

Imがホバリングしている部分だけを強調表示するには、何を変更する必要がありますか？

ps*属性が何であるかわからないので、使用する必要があります。

4

4 に答える 4

2

これを試して：

$('*').hover(function(e) {
  $('*').removeClass('over');
  $(this).addClass('over');
  e.stopPropagation();

}, function() {
  $(this).parent().addClass('over');
  $(this).removeClass('over');
});

stopPropagation()ホバー イベントが DOM をバブリングするのを防ぎます。そのため、要素が本体の左側にフラッシュされている場合は、正しい要素が選択されます (左上から入力して、意味を確認してください)。

デモを参照してください。

于 2013-03-14T19:59:27.343 に答える
2

新しくホバーされた要素に適用する前に、すべての要素から「over」クラスを削除します。

$('*').hover(function() {
    $('*').removeClass('over');
    $(this).addClass('over'); 
    return false;
}, function() {
  $(this).removeClass('over');
  $(this).parent().addClass('over');
});

http://jsfiddle.net/mtHyF/12/

于 2013-03-14T19:59:56.940 に答える
1

オブジェクトの内部にいる場合、通常はその親や親の親などの内部にいることを思い出してください。これが、複数の「オーバー」オブジェクトを取得する理由です。

最も内側のものだけを強調表示したい場合は、次を試すことができます。

if($(this).children().length==0) {
  $(this).addClass('over'); 
}

これは、その中に他のオブジェクトがあるものを強調表示することを拒否します。

現在ホバリングしている最も内側のオブジェクト (およびその親でも子でもないオブジェクト) が必要な場合は、次のようにします。

$('*').hover(function() {
  $('*').removeClass('over'); 
  $(this).addClass('over'); 
}, function() {
  $(this).removeClass('over');
  $(this).parent().addClass('over');
});
于 2013-03-14T20:03:44.967 に答える
1

常に 1 つの要素を常に強調表示する必要があると思いますが、内部要素にいる場合は、その親要素を強調表示したくありません。以下はそれを達成します：

$('*').hover(function() {
    if ($(this).parent() != null)
    {
        $(this).parents().removeClass('over');
    }
    $(this).addClass('over'); 
}, function() {
    $(this).removeClass('over');
    $(this).parent().addClass('over');
});
于 2013-03-14T20:04:09.137 に答える