html - CSS/HTML 图像交换不起作用

Question

我正在尝试进行图像交换，但它不起作用。 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;}

Answer 1

此解决方案可能对您有所帮助。

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;
}