我正在尝试进行图像交换,但它不起作用。 gpu.jpg
当我将鼠标悬停在它上面时正在显示和消失,但它闪烁不可见和可见。但是 gpu_replace.jpg
根本不显示,我做错了什么?下面是我的代码:
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;}
最佳答案
此解决方案可能对您有所帮助。
HTML
<span class="imgswap"> </span>
CSS
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;
}
关于html - CSS/HTML 图像交换不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27266000/