[英]How to move text to left on hover?
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? 当鼠标光标悬停在按钮上时,文本向下移动,我只需要向左移动文本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>⟶</button> </div>
The "issue" you're facing is that the span element's display type is inline, so it will follow its siblings. 您面临的“问题”是span元素的显示类型为内联,因此它将跟随其同级元素。
I suppose there are multiple ways to solve this. 我想有多种解决方法。
You can add vertical-align: top;
您可以添加vertical-align: top;
to the span. 到跨度。 (Super simple css fix that preserves the HTML as it is. Downside: fixes text to top of element) (超级简单的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>⟶</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>⟶</button> </div>
You can also display the parent as flex and justify the children accordingly: 您还可以将父级显示为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>⟶</button> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.