마우스 오버시 클래스 추가

Question

여기에 상황이 있습니다. 마우스를 가져간 요소에 테두리를 추가해야합니다. 저는 Jquery로 해보고 있습니다. 비슷한 질문을 여기에서 찾으 셨지만 모두 $(".myClass") 또는 $("#myId")과 같은 특정 선택기가 있습니다. 하지만 내 것은 $("*")입니다. 내 코드가 작동하지만 문제는 다른 요소 안에 요소가있는 경우 두 요소에 내가 추가 한 클래스가 있다는 것입니다. 그리고 입력 한 요소에 클래스를 추가하기 만하면됩니다.

ids 요소가 변경 될 수 있기 때문에 이것은 HTML의 기본 예입니다. 내가 자신을 분명하게 희망 http://jsfiddle.net/k4y00sa2/ :

<div id="first"> 
    <div id="second"> 
     <h2>TESTING MOUSE OVER</h2> 
    </div> 
</div> 

CSS의

#first{ 
    background-color: red; 

    padding:50px; 
} 
#second{ 
    background-color: blue; 
    text-align: center; 

} 
.over{ 
    border: 2px dashed black; 
} 

그리고 JQuery와 여기

$(document).ready(function(){ 
    $("body *").mouseover(function(){ 
     $(this).addClass("over"); 
    }); 
    $("body *").mouseleave(function(){ 
     $(this).removeClass("over"); 
    }); 
}); 

은 예입니다. 감사합니다.

Answer 1

, 그래서 약간의 성능을 잃게하고, 동적으로 추가 요소 작동하지 않습니다. 한 번만 부착하면 신체 요소에만 위임하는 것이 좋습니다. 이 같은 의미

$(document).on("mouseover", "*", function(ev) { 
 
    $(ev.target).addClass("over"); 
 
    return false; 
 
}); 
 
$(document).mouseout("*", function(ev) { 
 
    $(ev.target).removeClass("over"); 
 
});

#first { 
 
    background-color: #ffffce; 
 
    padding: 50px; 
 
} 
 
#second { 
 
    background-color: #eee; 
 
    text-align: center; 
 
    padding: 1em; 
 
} 
 
.over { 
 
    border: 2px dashed black; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div id="first"> 
 
    <div id="second"> 
 
    <h2>TESTING MOUSE OVER</h2> 
 
    </div> 
 
</div>

Answer 2

모든 노드가 이벤트를 처리하고 있습니다. 한 사람이 그것을 다룬 후에는 버블 링을 막아야합니다. false를 반환하면 이벤트가 더 이상 전파되지 않으며 브라우저에서 더 이상 처리하지 않습니다.

check it

Returning false in events is a shortcut for

$("body *").mouseover(function(){ 
    $(this).addClass("over"); 
    return false; 
}); 

:

ev.preventDefault(); 
ev.stopPropagation(); 

Answer 3

당신이 찾고있는 정확하게 확실하지. 클래스 나 유형 또는 다른 요소로 실제 요소를 선택하는 것처럼 보입니다. 하지만 아마도 이런 것이 도움이 될 것입니다. 그것의 부모가 이미 그것을 가지고 있다면 그것은 클래스를 추가하지 않을 것이다. 본질적으로 DOM을 통해 서로 항목을 건너 뜁니다. 트리에서 모든 단일 요소에 핸들러를 연결합니다 $("body *")를 사용하여 이벤트 처리기를 부착

$(document).ready(function(){ 
    $("body *").mouseover(function(){ 
     if (!$(this).parent().hasClass("over")){ 
     $(this).addClass("over"); 
     } 
    }); 
    $("body *").mouseleave(function(){ 
     $(this).removeClass("over"); 
    }); 
}); 

Answer 4

? http://jsfiddle.net/k4y00sa2/3/

$("body *").mouseover(function(){ 
    var cur = $(this); 
    $(".over").removeClass("over"); 
    cur.addClass("over"); 
    return false; 
}); 

클래스를 벗어나는 클래스는 제거합니다. 그리고 그것을 자식 요소에만 두는 것은 내부 요소 위로 마우스를 가져 가면 탐색 순서입니다.