如何在悬停时更改按钮的样式属性？

Posted 2023-03-05

【中文标题】如何在悬停时更改按钮的样式属性？

【英文标题】：How do I change a button's style property on hover?

【发布时间】：2019-07-13 23:53:42

【问题描述】：

编辑：我的网站可以在http://caconline.ca/找到。

我目前正在使用 WordPress 上的 Elementor 为学校俱乐部改造网站。基本上，我想实现一个可以在网站http://www.fleshbeauty.com上的按钮上找到的效果。当您将鼠标悬停在任何一个周围有黑色边框的按钮上时，您会看到一个浅粉色的阴影，在悬停时会被推动一点。我正试图在我的学校俱乐部的网站上实现相同的效果，但相反 - 所以常规按钮已经有一个红色填充，当你将鼠标悬停在按钮上时，会出现一个边框，从按钮。

到目前为止，我发现的一个解决方案是在自定义 CSS 中使用 ::before 选择器，但 Elementor 无法识别它。

这是我的代码到目前为止的样子：

a.elementor-button-link.elementor-button.elementor-size-xl:hover 
z-index: -1;
border: 3px solid #000000;
margin: -10px -10px 10px 10px; 

再说一次，这就是我想要的结果，但反过来：

Button found on Flesh Beauty

感谢任何帮助。谢谢！

【问题讨论】：

我看不到:before 的任何用途。你能展示一下你是如何使用:before的吗？

【参考方案1】：

我不完全确定我理解正确。但我试图重新创造我认为你想要的东西。

button
  background-color: #fdd;
  border: 0;
  position: relative;
  margin: 20px;
  padding: 10px;


button::after
  content: ' ';
  position: absolute;
  display: static;
  top: 0px;
  left: 0px;
  opacity: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
  border: 2px solid #000;
  transition: 200ms;


button:hover::after
  top: 5px;
  left: 5px;
  opacity: 1;

https://codepen.io/Lumnezia/pen/wNZvaZ

(这里还有另一个版本，文本也会随着边框移动 https://codepen.io/Lumnezia/pen/KJYKad)

如果您对如何使用 ::after 或 ::before 有任何疑问，请随时发表评论。如果你对 CSS 有基本的了解，代码应该是相当简单的。

【参考方案2】：

如果你添加你的html和css会更好，这是我从你的问题中理解的。

.buttonpadding:10px 35px; display:inline-block; background:none; border:1px solid #000; margin:30px; position:relative; color:#000; text-decoration:none; 
.button:beforebackground:pink; width:100%; height:100%; top:0; left:0; transform:translate(0px, 0px); content:''; position:absolute; z-index:-1; opacity:0; transition: all ease-in-out .5s;
.button:hover:beforeopacity:1;transform:translate(-10px, -10px);

<a class="button" href="#">Explore</a>

【讨论】：

您好，我将解锁我的网站以供进一步查看。该网站是caconline.ca。主页上的按钮是红色的。

试试@Juggernaut提供的第二种解决方案（这里还有另一个版本，文字也会随着边框移动codepen.io/Lumnezia/pen/KJYKad）