我想添加一个边框到我的按钮悬停事件，而不移动按钮或任何东西 [英] I want to add a border to my button on hover event without moving the button or anything

问题描述

现在我想在按钮上悬停一个边框。

right now I want to implement a border on hover on a button.

该按钮与一个div和3个其他按钮。但是，只要我将鼠标悬停在它上面，边框就会显示出来，但同时按钮也会扩展添加的边框的大小，这不是我在想的。

That button is in a div together with 3 other buttons. However, as soon as I hover over it, the border is being displayed, but at the same time the button expands the size of the added border as well, which is not what I have in my mind.

我做了一个小提示来演示这个问题：点击我

I made a fiddle to demonstrate the problem: Click me

我在这里读了这个主题，我发现一个解决方案，添加 margin-top：3px;
到悬停类，但是，挤压按钮，这不是我想要的。

I read up about this topic here, and I indeed found a solution, by adding margin-top: 3px; to the hover classes, however, that "squeezes" the button, which is not what I want.

而是，我希望按钮不看看压缩或任何东西

Instead, I want the button to not look compressed or anything, but rather simply with a 4px border overlaying the top 4 px of the button.

任何建议？

提前感谢

推荐答案

您可以尝试使用框阴影，因为这实际上不会影响定位：

You could try using a box shadow instead, as this doesn't actually affect the positioning:

a {
  transition: all 0.8s;
  margin: 5px;
  text-decoration: none;
  display: inline-block;
  background: lightgray;
  height: 50px;
  width: 150px;
  line-height:50px;
  text-align: center;
  color:black;
}
a:hover {
  box-shadow: 0 -3px red;
}

<a href="#">HOVER ME</a><a href="#">NOTICE</a><a href="#">HOW</a><a href="#">I</a><a href="#">DON'T</a><a href="#">MOVE?</a>

这篇关于我想添加一个边框到我的按钮悬停事件，而不移动按钮或任何东西的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！