在我为按钮使用 display flex 后，带有悬停选项的按钮不再工作

Question

我通常在按钮上使用悬停，然后当我在 CSS 中为按钮使用 display flex 时，悬停选项停止工作。当我加载 html 页面时，CSS 上的按钮编辑的第一部分有效，但 #register-btn button:hover 的部分无效。我是初学者，我尝试搜索了几个网站，但没有找到与我发生的情况类似的任何内容。

#box {
  width: 90%;
  height: 800px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#box h1 {
  color: white;
  font-size: 3em;
  font-family: Arial;
  height: 11vh;
}

#box #register-btn {
  height: 45vh;
}

div:nth-of-type(2) {
  margin-left: 105px;
  align-self: flex-start;
}

#register-btn button {
  background: none;
  color: coral;
  border: 2.5px solid;
  padding: 1em 2em;
  font-size: 1.1em;
  font-weight: bolder;
  transition: color 2s, border-color 2s, box-shadow 2s, transform 2s;
}

#register-btn button:hover {
  border-color: #49c04fcc;
  color: white;
  box-shadow: 0 0.5em 0.5em -0.4em #49c04fcc;
  transform: translateY(-1.5em);
  cursor: pointer;
}

<section id="box">
  <div>
    <h1>MOVE YOUR EDUCATION <br>INTO THE NEXT LEVEL!</h1>
  </div>

  <div id=register-btn><br><button>Register here! </button></div>
</section>

有什么帮助吗？

Answer 1

这工作正常，我没有发现任何问题。也许您在其他代码上存在冲突，导致它无法正常工作。您需要提供有关错误的更多信息。

check this out here:

https://codepen.io/mrroshan/pen/JjJOBBP

在我为按钮使用 display flex 后，带有悬停选项的按钮不再工作

Button with hover option not working anymore after I used display flex for the button

html

css

button

hover