如何在悬停时将文本向左移动？

Posted 2023-03-06

【中文标题】如何在悬停时将文本向左移动？

【英文标题】：How to move text to left on hover?

【发布时间】：2019-05-27 12:58:13

【问题描述】：

当鼠标光标悬停在按钮上时，文字向下移动，我只需要将文字向左移动5px，当鼠标悬停在按钮上时，如何实现？

div 
  text-align: center;


span 
  margin-right: 10px;


button 
  background: green;
  border: none;
  padding: 9px;
  color: #FFF;
  border-radius: 50%;
  cursor: pointer;
  transition: all 500ms ease;


button:hover 
  padding: 13px;
  transition: all 500ms ease;

<div>
  <span>test</span><button>&#10230;</button>
</div>

【问题讨论】：

编者，格式化时请不要更改CSS

我不太明白。您是否希望将文本锁定在其 Y 轴上并在其 X 轴上移动 5px？

是的。按钮悬停时仅在 x 轴上移动

【参考方案1】：

您面临的“问题”是 span 元素的显示类型是内联的，因此它将跟随其兄弟元素。

我想有多种方法可以解决这个问题。

您可以将vertical-align: top; 添加到跨度。 （超级简单的 css 修复，保留 html 原样。缺点：将文本修复到元素顶部）

div 
  text-align: center;


span 
  vertical-align: top;
  margin-right: 10px;


button 
  background: green;
  border: none;
  padding: 9px;
  color: #FFF;
  border-radius: 50%;
  cursor: pointer;
  transition: all 500ms ease;


button:hover 
  padding: 13px;
  transition: all 500ms ease;

<div>
  <span>test</span><button>&#10230;</button>
</div>

要真正解决这个问题（不在元素顶部流动文本），您需要在跨度之外添加一个包装器元素：

.center 
  text-align: center;


span 
  margin-right: 10px;

.wrapper 
 display:inline-block;

button 
  background: green;
  border: none;
  padding: 9px;
  color: #FFF;
  border-radius: 50%;
  cursor: pointer;
  transition: all 500ms ease;


button:hover 
  padding: 13px;
  transition: all 500ms ease;

<div class="center">
  <p class="wrapper"><span>test</span></p><button>&#10230;</button>
</div>

您还可以将父级显示为 flex 并相应地调整子级：

.flex 
  display: flex;
  justify-content: center;
  align-items: center;


span 
  margin-right: 10px;


button 
  background: green;
  border: none;
  padding: 9px;
  color: #FFF;
  border-radius: 50%;
  cursor: pointer;
  transition: all 500ms ease;


button:hover 
  padding: 13px;
  transition: all 500ms ease;

<div class="flex">
  <div><span>test</span></div><button>&#10230;</button>
</div>