如何在悬停时将文本向左移动? [英] How to move text to left on hover?

问题描述

当鼠标光标悬停在按钮上时，文本向下移动，我只需要将文本移动到5px的左侧，当悬停在按钮上时，如何实现呢?

When the mouse cursor has hovered at the button, the text moves down, I need to move text only to the left by 5px, when hovering on the button, how to implement it?

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>

推荐答案

您面临的问题"是span元素的显示类型为内联，因此它将跟随其同级元素.

The "issue" you're facing is that the span element's display type is inline, so it will follow its siblings.

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

I suppose there are multiple ways to solve this.

您可以将vertical-align: top;添加到跨度. (超级简单的CSS修复程序可保留HTML不变.缺点:可将文本修复到元素顶部)

You can add vertical-align: top; to the span. (Super simple css fix that preserves the HTML as it is. Downside: fixes text to top of element)

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>

要真正解决此问题(不使文本流到元素顶部)，您需要在跨度之外添加包装元素:

To really fix this(Not flowing text to the top of the element), you would want to add a wrapper element outside the span:

.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并相应地证明子级:

You can also display the parent as flex and justify the children accordingly:

.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>

这篇关于如何在悬停时将文本向左移动?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！