我想知道当我将鼠标悬停在另一张图片上时如何让一张图片出现

Question

你好，我想知道当我将鼠标悬停在另一个图像上时如何显示图像。

我有一些代码，但它不起作用我认为它应该是这样的；

CSS-

a bikeq 
{
    display: none;
}

a:hover bikeq {
    display: block;   
}

HTML-

<section class="r_img">
    <a href=""><img src="img/bike.png" class="bike"></a>
    <img src="bikeq_3.png" class="bikeq">
    </section>

我觉得我在 html 部分做错了，但我不知道还能做什么。

非常感谢任何帮助，

扎克

Answer 1

试试这个：

html

<section class="r_img">
    <a href="" class=”bike_img”></a>
</section>

css

a.bike_img { width: ?px; height: ?px; display: inline-block; background: url("img/bike.png"); }

a.bike_img:hover { background: url("img/bikeq_3.png"); }

其中 ?px 是图片的宽度和高度。您还需要确保您的图片网址正确，我只是猜测。

Answer 2

无法保留您提供的 HTML，因为这些元素是兄弟元素。您可以 "fake" 使用以下代码实现此效果：

<section class="r_img">
    <a href=""><img src="img/bike.png" class="bike"></a>
    <img src="bikeq_3.png" class="bikeq">
</section>

.bikeq {
    display: none;
}

.r_img:hover .bikeq 
{
    display: block;   
}

将鼠标悬停在两张图片的容器上时，会出现带有.bikeq class 的图片..

我想知道当我将鼠标悬停在另一张图片上时如何让一张图片出现

I was wondering how I would make an image appear when I hover over another image

html

css

image

displaytag