[英]swap image when hovering over its container div
悬停在包含div的图像上时,我碰到一堵试图交换图像的砖墙。
我可以用CSS来做,但是我有6个div,其中包含6个图像。 如果我在CSS中执行此操作,则需要6组悬停事件才能更改背景图像。 我想用最简单的代码来做到这一点。
目前,这些图像未设置为背景图像,而是设置为<img src>
所有悬停图像都使用相同的名称,但文件名中添加了“ over”。
即。 shop.png shopover.png是否可以将img src文件名附加到鼠标悬停在其容器div上时添加“ over”部分?
html:
<div class="row">
<a href="index.php?page=exhibitorlist&id=1"> <div class="c2 center"><img src="images/eliquid.png"><h2 class="center">Juice Brands</h2></div></a>
<a href="index.php?page=exhibitorlist&id=2"> <div class="c2 center"><img src="images/mod.png"><h2 class="center">Hardware</h2></div></a>
<a href="index.php?page=exhibitorlist&id=3"><div class="c2 center"><img src="images/dist.png"><h2 class="center">Distributors</h2></div></a>
<a href="index.php?page=exhibitorlist&id=4"><div class="c2 center on"><img src="images/shop.png"/><h2 class="center">Retailers</h2></div></a>
<a href="index.php?page=exhibitorlist&id=5"><div class="c2 center"><img src="images/robot.png"><h2 class="center">Machinary / Packaging</h2></div></a>
<a href="index.php?page=exhibitorlist&id=6"><div class="c2 center"><img src="images/other.png"><h2 class="center">Other</h2></div></a>
</div>
css:
#exhibitorcontainer {
background-color:rgba(0, 0, 0, 0.7);
background:url(../images/bg2.png) repeat;
width:100%;
height:100%;
}
#exhibitorcontainer .c2 {
margin: 0 5px;
width: 15.8%;
background-color:rgba(0, 0, 0, 0.5);
}
#exhibitorcontainer h2 {
font-size:16px;
color: #1b9bff;
}
#exhibitorcontainer .c2:hover h2 {
color:#666;
}
目前,我将H2从蓝色切换为灰色,我想对图像执行相同的操作。 关于最佳方法的任何想法?
最简单的方法是使用两个图像:
<div class="c2 center">
<img src="images/dist.png" class="normal-image">
<img src="images/dist-over.png" class="hover-image">
<h2 class="center">Distributors</h2>
</div>
然后使用CSS:
.hover-image, .c2:hover .normal-image {
display: none;
}
.c2:hover .hover-image {
display: inline;
}
您可以通过使用如下所示的javascript进行简单的更改:
html的图像代码
<img src="images/click.png" onmouseover="ic()" id="myImage"/>
通过javascript更改图片
function ic(){ document.getElementById('myImage').src='images/yes.png'; }
现在,当鼠标悬停在图像上时,javascript将调用此函数并在此处设置图像,如果您希望鼠标悬停在图像上时不返回图像,则图像将返回先前的图像,因此反之亦然。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.