on mouse over show x on image

问题

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

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 :

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

回答1:

Use CSS Positioning techniques along with display.

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.

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

You are using span so instead of equivalent selectors would be

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

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

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

回答2:

set the parent of you span to relative and the span to absolute this is all you have to know

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

if you apply the rule on multiple elements it looks like this

Demo

来源：https://stackoverflow.com/questions/22148034/on-mouse-over-show-x-on-image

标签

html

css

css-position