jquery가 무한 루프에 갇혀 있거나 깜박이는 항목을 시작합니다.

Question

아래 코드를 참조하십시오. 내가 원하는 건입니다 : 내가 항목 1에 마우스를 가져 가면

• 내 모든 항목이 절대적으로
• 을 위치, 내가 항목 2에 마우스를 가져 가면, 나는 항목 3 숨기려는 항목 2는, 항목 3는
• 표시 할
• 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> 

당신은

항목 2는, 항목 1의하는 MouseLeave 다음 트리거 항목 1이 항목 1의 mouseenter

Answer 2

이벤트 리스너를 사용해야합니다. 그렇지 않으면 코드가 위에서 아래로 실행됩니다.

Answer 3

증가 Z- 인덱스, 또는 단지 이동의 트리거 항목 2에 이동 그렇게 할 때 항목 1에서 당신의 HTML을 restruct한다 항목 2 + 3에 다른 곳

Answer 4

당신은 당신이 항목 3

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

에 onhover의 또 다른 기능을 쓸 수있는 당신의 HTML 구조 조정을하지 않으려면

);

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

건배