Reputation: 53
I am trying to make an image swap but it is not working. gpu.jpg
is showing and dissapering when I hover over it, but it flickers invisible and visible. But gpu_replace.jpg
does not display at all, what am I doing wrong? bellow is my code:
HTML
<div id="contents">
<h2><center>What are the components of a graphics card and what do they do?</h2>
<h3><center>Bellow a GTX 980 PCB.</h3>
<div style="position: relative; left: 0; top: 0; bottom: 100px;">
<img src="pic\980_pcb.jpg" style="width:908.2px;height:398.05px position: relative; top: 0; left: 0;"/>
<span class="imgswap">
<img src="pic\gpu.jpg" style="position: absolute; top: 115px; left: 273.5px;"/>
</span>
</div>
</div>
CSS
span.imgswap {
background-image: url("pic/gpu_replace.jpg");
background-repeat: no-repeat; display:block;
}
span.imgswap:hover img {visibility:hidden;}
Upvotes: -1
Views: 313
Reputation: 13858
span
by default is not block element, so in your code span.imgswap
has a computed height of 0. This is why you can't see "gpu_replace.jpg", even though it has a visible child!
When you hover "gpu.jpg", its parent node span.imgswap
is also hovered, so span.imgswap:hover img {visibility:hidden;}
makes "gpu.jpg" invisible, and then... it's invisible so it's not hovered --> its parent is not hovered --> span.imgswap:hover img {visibility:hidden;}
is not applied --> "gpu.jpg" apprears again --> .... That's why "gpu.jpg" flashes.
Upvotes: 0
Reputation: 874
This solution might help you.
<span class="imgswap"> </span>
span.imgswap{
background: url(http://stackoverflow.com/users/flair/4021429.png) no-repeat;
height: 58px;
width: 208px;
display: block;
}
span.imgswap:hover{
background: url(http://stackoverflow.com/users/flair/4021429.png?theme=hotdog) no-repeat;
}
Upvotes: 1