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是不可能的，因为元素是兄弟。你可以＆＃34;假＆＃34;使用以下代码实现此效果：

<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类的图像将显示..

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

2 个答案: