在显示x的老鼠在图象 [英] on mouse over show x on image

问题描述

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

i want to show X mark on image , which is 24x24 size,

代表我需要li元素和元素

for that i take li element and in element

<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图标放在正确的地方。如

my problem is in html i am not able to place X icon on correct place. as per screenshot

推荐答案

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

Use CSS Positioning techniques along with display.

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

Here, am setting the first img i.e the close icon to display: none; and on :hover of div I set it to block, make sure you use position: relative; on the parent element else it will fly out in the wild.

演示

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

---

c $ c> span ，所以代替等效的选择器将是

---

You are using span so instead of equivalent selectors would be

演示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：relative; 容器，
中包装 position：absolute; > 选择器，它表示直接孩子，所以我已经具体选择了 li b有

In the above selectors, it's having the same logic as above, the crucial part is to wrap the position: absolute; element inside a position: relative; container, and also about > selector, it means direct child, so I've specifically selected the levels of li you are having

只要摆脱 height：25px; inline 样式声明...

Just get rid of the height: 25px; as well... and avoid using inline style declarations...

这篇关于在显示x的老鼠在图象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！