html - 将鼠标悬停在 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;
}