I am looking for guidance on how to hide the <img /> tags within this particular structure and then fade them in upon mouseover using jQuery/css.
The concept is to have the HTML <img> element hidden initially, only to smoothly fade in when hovered over, while a CSS background remains visible at the start.
HTML:
<div id="nav">
<a href="blah" id="id1">
<img src="hoverimg.png" alt="Link Text 1" /> <span> Link Text 1 </span> </a>
<img src="hoverimg2.png" alt="Link Text 2" /> <span> Link Text 2 </span> </a>
</div>
CSS:
#nav a span{
display: none; /* Hides text reader title */
}
#nav a {
display: block;
height: 200px;
width: 250px;
background url("bgimage.png"); /* Ideally use # selector for individual links */
}
#nav a img{
/* Need jQuery compatibility and maintain backwards compatibility for a:hover effect */
}
jQuery:
???
Additionally, I have observed that jQuery can run an animation multiple times if the target element is deeply nested as a child node. Is there a solution to prevent this from happening?