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

Answer 2

默认情况下，

span不是块元素，因此在您的代码中span.imgswap的计算高度为 0 。这就是为什么你看不到＆＃34; gpu_replace.jpg＆＃34;，即使它有一个可见的孩子！

当您悬停＆＃34; gpu.jpg＆＃34;时，其父节点span.imgswap也会悬停，因此span.imgswap:hover img {visibility:hidden;}会使＆＃34; gpu.jpg＆＃34;看不见，然后......它看不见，所以它不会徘徊 - ＆gt;它的父母不会徘徊 - ＆gt; span.imgswap:hover img {visibility:hidden;}未应用 - ＆gt; ＆＃34; gpu.jpg＆＃34;再次出现 - ＆gt;那就是为什么＆＃34; gpu.jpg＆＃34;闪烁。

CSS / HTML图像交换不起作用

2 个答案:

HTML

CSS