Получение элемента класса внутри элемента класса при наведении курсора мыши

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'; 
} 

Я мог бы использовать это вместо 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

Это также может быть сделано путем передачи ссылки на изображение для функции cover() используя this ключевое слово, как в onmouseover="cover(this)"

Например, следующий код скрывает частично на мыши. Это также гарантирует, что только изображение, которое затушевывается, будет скрыто над мышью (я предполагаю, что класс 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>