javascript - 無限ループで立ち往生しているアイテムにjqueryホバー/アイテムの点滅を開始

Question

以下の私のコードを見てください。私が欲しいのは：

• 私のアイテムはすべて絶対に配置されています
• item1にカーソルを合わせると、item2、item3が表示されます
• item2にカーソルを合わせると、item3を非表示にしたい
• item2 をクリックすると、item3 がまだ非表示のときに何らかの機能を実行します

以下のコードでは、item2 にカーソルを合わせると、item2 と item3 が点滅し始めます。

私は何を間違っていますか？

jsFiddle:

http://jsfiddle.net/z9Unk/53/

HTML

<div class="item1">
  item1
</div>
<div class="item2">
    item2
</div>
<div class="item3">
    item3
</div>

CSS:

item1 {
    position:absolute;
    width:150px;
    height:150px;
    background-color:red;
    top:5%;
}

.item3, .item2 {
    position:absolute;
    width:50px;
    height:50px;
    background-color:green;
    top:8%;
    left:1%;
    display:none;
}

.item3 {
    top:18%;
}

JS:

var item1 = $(".item1");
var item2 = $(".item2");
var item3 = $(".item3");

item1.hover(
    function() {
      item2.show();
      item3.show();
    },
    function() {
      item2.hide();
      item3.hide();
    }

);

item2.hover(
    function() {
      item3.hide();
    },
    function() {
    }

);

item2.click(
    function() {
        alert("Perform some function");
    }
);

Answer 1

<div class="item1">
  item1
    <div class="item2">
        item2
    </div>
    <div class="item3">
        item3
    </div>
</div>

HTMLを再構築する必要があります

item2はitem1から外れているため、item2に移動すると、item1のmouseleaveがトリガーされ、次にitem1のmouseenterがトリガーされます。

Answer 2

イベントリスナーを使用する必要があります。そうしないと、コードがトップダウンで実行されます。

Answer 3

HTML を再構築したくない場合は、item3 の onhover 用に別の関数を作成できます。

item3.hover(
function() {
     item2.show();
  item3.show();
},
function() {
}

);

http://jsfiddle.net/z9Unk/55/

乾杯

Answer 4

item1のz-indexを増やすか、item2+3を他の場所に移動します