我想在鼠标悬停时隐藏元素。
<div class="filmbox">
<img src="img/cover/django.jpg" onmouseover="cover()" class="filmpic">
<div class="filmcover">98 pt</div>
<div class="filmtext"> DJANGO</div>
</div>
Filmbox类倍增多次,因此我无法将其更改为ID。
function cover(){
document.getElementsByClassName('filmcover').style.visibility='hidden';
}
我可以使用它而不是getElements .....我希望这个div对图片做出反应而不是自己。
答案 0 :(得分: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"> DJANGO</div>
</div>
答案 1 :(得分:0)
这也可以通过使用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"> DJANGO</div>
</div>
答案 2 :(得分:0)
<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"> DJANGO</div>
</div>