마우스 오버시 클래스 요소 내에서 클래스 요소 가져 오기

Question

마우스 오버시 요소를 숨기려고합니다.

<div class="filmbox"> 
    <img src="img/cover/django.jpg" onmouseover="cover()" class="filmpic"> 
    <div class="filmcover">98 pt</div> 
    <div class="filmtext">&nbsp;DJANGO</div> 
</div> 

Filmbox 클래스는 여러 번 곱하기 때문에 ID로 변경할 수 없습니다.

function cover(){ 
document.getElementsByClassName('filmcover').style.visibility='hidden'; 
} 

이 div를 getElements ..... 대신 사용할 수 있습니다.이 div가 그림 자체에 반응하지 않게하고 싶습니다.

Answer 1

사용 JQUERY 다음

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
<script type="text/javascript"> 
function cover(me){ 
$(me).next(".filmcover").hide(); 
} 
</script> 

<div class="filmbox"> 
    <img src="img/cover/django.jpg" onmouseover="cover(this)" class="filmpic"> 
    <div class="filmcover">98 pt</div> 
    <div class="filmtext">&nbsp;DJANGO</div> 
</div> 

Answer 2

이것은 또한 예를 들어 onmouseover="cover(this)"

에서처럼 this 키워드를 사용 cover() 함수 화상에 대한 참조를 전달함으로써 수행 될 수 있고, 다음 코드 숨기는 마우스 위에 particilar 이미지입니다. 또한 moused 된 이미지 만 마우스 위에 숨길 수 있습니다 (클래스 filmpic가 여러 이미지에 적용된다고 가정하고 있음).

<script> 
function cover(imagetag){ 
    imagetag.style.visibility="hidden"; 
} 
</script> 

<div class="filmbox"> 
    <img src="img/cover/django.jpg" onmouseover="cover(this)" class="filmpic"> 
    <div class="filmcover">98 pt</div> 
    <div class="filmtext">&nbsp;DJANGO</div> 
</div> 

Answer 3

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
<script> 
jQuery(document).ready(function(){ 
    jQuery(".filmpic").hover(
    function(){ 
     $(".filmcover").hide(); 
    }, 
    function(){ 
     $(".filmcover").show(); 
    } 
    ); 
}); 
</script> 
<div class="filmbox"> 
<img src="img/cover/django.jpg" class="filmpic"> 
<div class="filmcover">98 pt</div> 
<div class="filmtext">&nbsp;DJANGO</div> 
</div>