在鼠标悬停时，在图像上显示X

Question

我希望你能在图片上展示一个24x24大小的X标记，为此我使用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图标放置在正确的位置，如屏幕截图所示。

- vir

---

假设它不是全部内联的，你可以发一下你的CSS吗？ - James Donnelly

Answer 1

使用CSS定位技术与display一起使用。

在这里，我将第一个img即关闭图标设置为display: none;，并在div上的:hover中将其设置为块状。确保在父元素上使用position: relative;，否则它将飞出去。 演示

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

您正在使用标签，因此等效选择器应为：

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

在上面的选择器中，它具有与上面相同的逻辑，关键部分是将 position: absolute; 元素包含在 position: relative; 容器内，另外关于 > 选择器，它表示直接子元素，所以我特别选择了你拥有的 li 层级。

只需摆脱 height: 25px; 并避免使用 内联 样式声明...

- Mr. Alien

---

这很好，但如果您使用原始问题中的文本X示例，那将更好。 - ANeves

@ANeves 我们的同事正在寻找 X 图标，而不是 X 文本。 - ɐsɹǝʌ ǝɔıʌ

@equisde 问题中有一个 HTML 文本 X 而不是图像/图标，并且所需的帮助是将其定位而不是用图像替换它。我认为两种解决方案都可以，但更简单的方案会更有帮助。 - ANeves

Answer 2

将你的父元素设置为相对定位，并将子元素设置为绝对定位，这就是你需要知道的全部。

li{
    width:150px;
    height:150px;
    border:1px solid red;
    margin:20px;
    position:relative;
    list-style:none;
}
span{
    position:absolute;
    top:-10px;
    right:-10px;
    display:none; 
}

li:hover span{
    display:block;   
}

HTML

<li>
    <span>x</span>
</li>

演示

如果您将规则应用于多个元素，则如下所示

演示

- Gildas.Tambo