將鼠標懸停在div上會改變文本的對齊方式

我想要的是，當我將鼠標懸停在div上時，圖像應該可見。這裏是我的html和風格將鼠標懸停在div上會改變文本的對齊方式

.icon 
 
    { 
 
\t  cursor: pointer; 
 
     display: none; 
 
    } 
 

 
    .text:hover .icon 
 
    { 
 
     display: inline; 
 
     float : right; 
 
    }

<div class="text"> 
 
\t sometext 
 
\t  <img class="icon" title="Open" src="somepath"></img> 
 
</div>

的問題是，當懸停完成後，DIV中顯示的文本不居中對齊。文本相對於圖像向上移動。

來源

2017-07-28 Charu

刪除浮動：正確的 - 徘徊時，或者僅設置移動到.icon類。圖像對齊可能是責任，你可能想要把它包裝成一個包裝div，並使用一些絕對定位的圖像在一個可見的div中，這是絕對定位，並始終可見（所以它消耗的圖像將保持它的空間是可見的） – RichGoldMD

改變你的CSS到：

.text:hover .icon 
{ 
    display:inline; 
    right:0px; 
    position:absolute; 
}

來源

2017-07-28 19:49:21 Zack

它的工作..謝謝.. – Charu

將鼠標懸停在div上會改變文本的對齊方式

回答

相關問題