在鼠標上的圖像

我想顯示圖像X大關，這是24×24大小顯示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>

東西： enter image description here

我的問題是HTML我不能將X圖標放在正確的地方。按照截圖

來源

2014-03-03 vir

假設它不是全部內聯，你可以發佈你的CSS？ –

設置父的你跨越到相對和跨度到絕對這是所有你必須知道

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

來源

2014-03-03 13:29:58

與display一起使用CSS定位技術。

在這裏，我第一個img即關閉圖標設置爲display: none;和對div:hover我將它設置爲阻止，請確保您使用position: relative;父元素否則它將在野外飛了出去。

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

您使用span所以代替相當於選擇器將是

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: relative;容器，也關於>選擇內部position: absolute;元素，這意味着直接孩子，所以我專門挑選你有

剛剛擺脫了height: 25px;，以及在中li水平...並避免使用內嵌風格聲明...

來源

2014-03-03 13:31:03

這很好，但如果您使用原始問題中的文本「X」的示例，則會更好。 – ANeves

@收到我們的同事要求X圖標，而不是X作爲文本 – equisde

@equisde該問題具有HTML文本'X'而不是圖像/圖標，並且所提供的幫助是定位它，而不是將其替換爲圖像。我認爲這兩種解決方案都可以，但更簡單的解決方案會更有幫助。 – ANeves

在鼠標上的圖像

回答

相關問題