鼠标悬停在图像上显示 x

我想在图像上显示 X 标记，尺寸为 24x24，

为此我采用 li 元素和 in 元素

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

something like this :

我的问题是在 html 中，我无法将 X 图标放置在正确的位置。根据屏幕截图

使用 CSS 定位技术display.

在这里，我设置第一个img即关闭图标display: none; and on :hover of div我将其设置为阻止，请确保您使用position: relative;在父元素上，否则它会飞出去。

Demo http://jsfiddle.net/6495D/

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 http://jsfiddle.net/6495D/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;a 内的元素position: relative;容器， 还有关于>选择器，它意味着直接子代，所以我专门选择了级别li你是 拥有

只要摆脱height: 25px;以及...并避免使用inline样式声明...