悬停在 div 上会更改其中文本的对齐方式

Question

我想要的是，当我将鼠标悬停在 div 上时，图像应该变得可见。 这是我的 html 及其样式

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

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

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

问题是当悬停完成时，div 中显示的文本不是居中对齐的。文字相对于图像向上移动。

Answer 1

将你的 css 更改为：

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