鼠标悬停时在类元素中获取类元素

Getting an class element within a class element on mouseover

本文关键字：元素 获取 悬停 鼠标      更新时间：2023-09-26

我想在鼠标悬停时隐藏一个元素。

<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对图片起作用，而不是它本身

使用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>

这也可以通过使用this关键字将对图像的引用传递给cover()函数来完成，如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>

<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>
相关文章：