html – 鼠标悬停在图像上显示x

2023年4月8日 409次阅读

我想在图像上显示X标记,尺寸为24×24,

因为我采取li元素和元素

<li style="display: inline-block; background: #283038; border: 1px solid #161b1f; margin: 5px; height: 25px; padding: 2px; border-radius: 3px;">
            <ul>
                <li style="width: auto; float: left;">
                    <img class='tagImage'/>
                                        <span class='removeitem'>X</span>
                </li>
            </ul>
        </li>

这样的事情：

我的问题是在HTML中我无法将X图标放在正确的位置.截图截图

最佳答案 使用CSS定位技术和显示.

在这里,我设置第一个img即关闭图标display：none;并在：我将div设置为阻止,确保你使用position：relative;在父元素上,它将在野外飞出.

Demo

div {
    position: relative;
    display: inline-block;
}

div img:first-child {
    position: absolute;
    top: 10px;
    right: 10px;
    display: none;
}

div:hover img:first-child {
    display: block;
}

您正在使用span而不是等效的选择器

Demo 2

ul > li > ul > li {
    position: relative;
}
ul > li > ul > li > span {
    position: absolute;
    top: 10px;
    right: 10px;
    display: none;
}
ul > li > ul > li:hover > span {
    display: block;
    color: #fff;
}

在上面的选择器中,它具有与上面相同的逻辑,关键部分是包裹位置：绝对;位置内的元素：相对;容器,
还有关于>选择器,它意味着直接的孩子,所以我特意选择了你的李的水平
有

刚刚摆脱高度：25px;以及…并避免使用内联样式声明…

点赞