javascript - 1つのアイテムにのみ影響する複数の要素にカーソルを合わせる

Question

こんにちはみんな私は並んで配置されている同じクラス名のいくつかの要素をホバーする方法があるかどうか疑問に思っていました、そしてアクションは要素の領域を離れるとトリガーされるでしょう。例えば ​​：

<div class="hoverme"></div>
<div class="hoverme"></div>
<div class="hoverme"></div>
<div class="hoverme"></div>
<div class="hoverme"></div>

以下の「unhover」のJavaScriptは、「hoverme」クラスの領域全体を離れるときにのみ呼び出す必要があります。

$('.hoverme').live('mouseover mouseout', function(event) {
            if (event.type == 'mouseover') {

                if(!$("#stage1 td").hasClass("hover"))
                {
                    $("#stage1 td").addClass("hover",200)
                }   
            } 
            else {

                //$("#stage1 td").removeClass("hover",200)

            }
        });

この行動の方法はありますか？

編集：divの形状が純粋に正方形ではないことを言及するのを忘れました。それはいくつかの正方形で構成されていますが、最終的には形がかなり奇妙です。そのため、divを別の親divでラップすることはできませんでした。

私はjqueryuiを使用しているため、2番目のパラメーターでクラスを追加および削除することができます

Answer 1

これを試してください：live()非推奨ですon()メソッドを使用できます：

$('.hoverme').on('mouseover', function(event) {
   $("#stage1 td").addClass("hover")
}).on('mouseout', function() {
   $("#stage1 td").removeClass("hover")
})           

http://jsfiddle.net/jUmTt/

Answer 2

hover彼らがクラスを受け取る要素のいずれかにカーソルを合わせるたびに意味しますか？これを試して：

var elements = $('.hoverme');
elements.on('hover', function(event) {
  event.type == 'mouseover' ? elements.addClass('hover') : elements.removeClass('hover');
});

または、HTMLを再構築して、ホバー可能な要素をラップすることもできます。

<div class="hoverWrap">
  <div class="hoverme"></div>
  <div class="hoverme"></div>
  <div class="hoverme"></div>
  <div class="hoverme"></div>
  <div class="hoverme"></div>
</div>

次に、ホバーイベントリスナーをにアタッチしますhoverWrap。意味的には、これはより理にかなっています。マークアップで要素が互いに近接しているからといって、それらが1つの大きな要素として扱われる必要があるとは限りません。

Answer 3

以前の回答が混在しているようです。

• mouseover と mouseout の代わりに、mouseenter と mouseleave を使用します。

• 第二に、ラッパー div を使用できます。これが私がそれを機能させた方法です。子 div にカーソルを合わせると、その親がどこにあるかに関係なく、その親にもカーソルを合わせます。親 div の mouseleave イベントは、子の上にカーソルが置かれなくなるまでトリガーされません。

サイズがゼロのラッパー div を作成して、5 つの子 div を十字の形に絶対配置してみましたが、必要な方法で機能すると思います。Firefox と Chrome でテスト済み。

$('.hoverme-wrapper').on('mouseenter mouseleave', function(e) {
  if (e.type === 'mouseenter') {
    if(!$("#stage1 td").hasClass("hover")) 
      $("#stage1 td").addClass("hover", 200)
  } else {
    $("#stage1 td").removeClass("hover", 200);
  }

[jQuery UI addClass 実装に対してテストしたことを確認するために編集]

Answer 4

わかりませんが、あなたはこれをやろうとしていると思います：

var timer;
$('.hoverme').on('mouseenter mouseleave', function(e) {
    if (e.type === 'mouseenter') {
        clearTimeout(timer);
        if(!$("#stage1 td").hasClass("hover")) {
            $("#stage1 td").addClass("hover")
        }   
    } else {
        timer = setTimeout(function() {
            $("#stage1 td").removeClass("hover");
        }, 300);
    }
});

Answer 5

mouseleaveの代わりに使用しmouseoutます。