Question

我在页面上放置了一个按钮，每当将鼠标悬停在该按钮上时，我的文字和

都会稍微向上移动。请帮忙（我是初学者/新手/绿色）-代码将显示在下面

.btn {
  font-weight: 700px;
  border-radius: 500px;
  text-transform: uppercase;
  border-color: none;
  padding: 10px;
}

.btn-xl {
  padding: 1rem 2rem;
  background-color: #4B307B;
  border-color: white;
}

.btn-xl:hover {
  background-color: gold;
  border-width: 3px;
  border-color: #4B307B;
}

hr {
  border-color: gold;
  width: 150px;
  max-width: 65px;
}

<div class="container d-flex align-items-center h-100">
  <div class="row">
    <header class="text-center col-12">
      <h1 class="text-uppercase"><strong>Graduation Support</strong></h1>
    </header>
    <div class="buffer col-12"></div>
    **
    <section class="text-center col-12">
      <hr>
      <button class="btn btn-primary btn-xl">Find out more</button>
    </section>**
  </div>
</div>

Answer 1

您还需要将border-width: 3px;添加到.btn-xl类中，而不仅仅是将鼠标悬停类中。我相信它的边界出现在引起问题的悬停上。看到这里：

.btn{
    font-weight: 700px;
    border-radius: 500px;
    text-transform: uppercase;
    border-color: none;
    padding: 10px;
}

.btn-xl{
    padding: 1rem 2rem;
    background-color: #4B307B;
    border-color: white;
    border-width: 3px;

}
.btn-xl:hover{
    background-color: gold;
    border-width: 3px;
    border-color: #4B307B;

}

hr{
    border-color: gold;
    width: 150px;
    max-width: 65px;
}

<div class="container d-flex align-items-center h-100">
            <div class="row">
                <header class="text-center col-12">
                <h1 class="text-uppercase"><strong>Graduation Support</strong></h1>
                </header>
                <div class="buffer col-12"></div>
            **<section class="text-center col-12">
                <hr>
                <button class="btn btn-primary btn-xl">Find out more</button>
            </section>**
            </div>
    </div>

悬停按钮问题

1 个答案: