鼠标在图像上显示x

Question

我想在图像上显示X标记，大小为24x24，

为此我采取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图标放在正确的位置。截图截图

Answer 1

使用CSS定位技术和display。

在这里，我设置第一个img即关闭图标到display: none;和:hover div我将其设置为阻止，请确保使用{{1在父元素上，它会在野外飞出。

Demo

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

span

在上面的选择器中，它具有与上面相同的逻辑，关键部分是将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 ......并避免使用内联样式声明......

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>

DEMO

如果您对多个元素应用规则，它看起来像这个

Demo