悬停在图像上时的效果

Question

当我尝试调用它时，我认为我的类或 ID 被搞乱了。CSS：image#ply : hover .ply-text {    visibility: visible;}HTML：<image id="ply" style="height: 50px; padding:5px;" src="images.png">        <div class="ply-text">            <p>Click for more info!</p>        </div>

Answer 1

先说几个问题：

• 用于嵌入图像的 HTML 元素称为img。

• 元素img的内容模型是空的，即它可能没有任何子元素。

• 即使这些不是问题，您也不会看到您正在寻找的效果，因为文本在开始时就已经可见。

鉴于此，这是一个可能的解决方案：

当我尝试调用它时，我认为我的类或 ID 被搞乱了。

CSS：

image#ply : hover .ply-text {

    visibility: visible;

}

HTML：

<image id="ply" style="height: 50px; padding:5px;" src="images.png">

        <div class="ply-text">

            <p>Click for more info!</p>

        </div>

htmlCSS

这~是一个同级选择器，允许一个元素引用另一个元素后面的元素。

Answer 2

当我尝试调用它时，我认为我的类或 ID 被搞乱了。

CSS：

image#ply : hover .ply-text {

    visibility: visible;

}

HTML：

<image id="ply" style="height: 50px; padding:5px;" src="images.png">

        <div class="ply-text">

            <p>Click for more info!</p>

        </div>

htmlCSS