悬停时向下推动内容的按钮答案

【问题标题】：Button pushing content down on hover悬停时向下推动内容的按钮
【发布时间】：2022-06-23 20:31:15
【问题描述】：

我正在开发一个网站，但遇到了一个我无法真正解决的小问题。基本上，我有一个信用按钮，当用户将鼠标悬停在它上面时应该会产生一些效果。但是，如果我将鼠标悬停在按钮上，它会按下页面上的所有内容。

我已经尝试了很多解决它，但遗憾的是我找不到解决方案。我相信我迟早会找到解决方案，但我的日程安排得当，必须完成页面上的一些其他事情，所以我需要专注于这一点。

.creditsbtn {
    font-family: 'Courier New', Courier, monospace;
    color: #333;
    background: #AB5DFC;
    border-radius: 10px;
    border: #AB5DFC;
    padding-top: 5px;
    padding-bottom: 7px;
    padding-right: 10px;
    padding-left: 10px;
    font-size: 20px;
}

.creditsbtn:hover {
    transform: translateY(-5px);
    color: #333;
    box-shadow: .0rem .2rem .4rem #777;
    border: 5px solid #b16afd;
    pointer-events: visible;
    position: relative;
    z-index: 0;
    visibility: visible;
    float: none;
}

<h2>header 1</h2>
<p style="text-align: center">some text<br><br>
<a href="/credits"><button class="creditsbtn">button</button></a></p>
<br><hr>
<h2>header 2</h2>
<p style="text-align: center">some more text<br><br></p>

【问题讨论】：

请移除悬停边框 .creditsbtn:hover{border:5px solid #b16afd;}
如果您希望按钮更大，可以将border 更改为outline。
你想要大按钮然后请添加 - .creditsbtn {border: 5px solid #b16afd;}

标签： html css

【解决方案1】：

尝试如下操作（我在代码中添加了 cmets）。诀窍是从一开始就具有该边框但具有透明颜色，并且只需在悬停时更改颜色。

.creditsbtn {
    font-family: 'Courier New', Courier, monospace;
    color: #333;
    background: #AB5DFC;
    border-radius: 10px;
    /* line I added */
    border: 5px solid transparent;
    padding-top: 5px;
    padding-bottom: 7px;
    padding-right: 10px;
    padding-left: 10px;
    font-size: 20px;
  
}

.creditsbtn:hover {
    transform: translateY(-5px);
    color: #333;
    box-shadow: .0rem .2rem .4rem #777;
    /* line I added */
    border-color:#b16afd;
    pointer-events: visible;
    position: relative;
    z-index: 0;
    visibility: visible;
    float: none;
}

<h2>header 1</h2>
<p style="text-align: center">some text<br><br>
<a href="/credits"><button class="creditsbtn">button</button></a></p>
<br><hr>
<h2>header 2</h2>
<p style="text-align: center">some more text<br><br></p>

动画与你所拥有的有所不同，但这样你就可以避免你遇到的推动问题。

【讨论】：

【解决方案2】：

而不是有一个将其他内容向下推的边框。您可以有一个与按钮颜色相同的实心框阴影。这将在不影响其他内容的情况下放大悬停框。然后为阴影效果添加第二个 box-shadow。

box-shadow: 0px 0px 0px 10px #color, 0px 8px 8px #000;

/* before the comma is your enlarged border but set your color. 
After the comma is an actual shadow currently set to black*/

【讨论】：