호버는 하나의 요소에서만 작동합니다.

Question

JavaScript를 사용 중이며 마우스를 가져 갔을 때 모든 요소 정보를 표시하려고합니다. 지금까지는 첫 번째 요소 정보 만 얻었고 두 번째 요소는 활성화되지 않았습니다. 모든 요소를 ​​작동시키는 법? 여기

자바 스크립트 코드 :

$('#user').hover(function() { 
    $('#popup').show(); 
}, function() { 
    $('#popup').hide(); 
}); 

<div id='user'>I am a user. Move your mouse over me</div> 
<div id='popup'>Extended info about a user</div> 
<div id='user'>I am a user. Move your mouse over me</div> 

<div>I a piece of useless information. No use hovering over me.</div> 

http://jsfiddle.net/Hyw7Z/1/

Answer 1

당신은 이런 일이 같은 것없이 두 개 이상의 요소 "ID"에 대해 동일한 값을 사용할 수 없습니다. 자바 스크립트에서

<div class="user" ... > 

그리고 대신, "클래스":

$('.user').hover(function() { ... 

같은 "팝업"간다,하지만 당신은 다음과 같이 할 것입니다 :

$('.user').hover(function() { 
    $(this).next('.popup').show(); 
}, function() { 
    $(this).next('.popup').hide(); 
}); 

을 그 다음 요소를 찾을 것입니다 <div> 그 "팝업"클래스를 가지고, 그것을 표시/숨기기. 그러한 요소가 없다면 아무 일도 일어나지 않을 것입니다.

Answer 2

ID 선택기를 사용하고 있습니다. ID는 페이지에 한 번만 올릴 수 있습니다. 이를 위해 클래스 선택기를 사용할 수 있습니다.

<div class='user'>I am a user. Move your mouse over me</div> 
<div id='popup'>Extended info about a user</div> 
<div class='user'>I am a user. Move your mouse over me</div> 

$('.user').hover(function() { 
    $('#popup').show(); 
}, function() { 
    $('#popup').hide(); 
}); 

JSFiddle.