I've come to a roadblock while attempting to change an image when hovering over its containing div.
I could achieve this using CSS, but I have 6 divs with 6 images inside them. If I were to use CSS, I'd need 6 sets of hover events to swap the background image. I'm looking for the simplest code possible to accomplish this.
Currently, the images are not set as background images but as <img src>
All hover images have the same name but with 'over' added into the file name.
For example: shop.png shopover.png Is there a way to dynamically append the 'over' part to the img src file name when hovering over its container div?
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">Machinery / 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;
}
Currently, I switch the H2 text color from blue to grey on hover. I'm looking for ideas on how to accomplish the same for the image. Any suggestions on the best approach to do this?