按钮悬停不执行任何操作

Question

我已经设置了这些悬停效果，但似乎并没有改变任何事情。我不知道为什么。

与底部的主按钮相同。

.button {
  background: #fff;
  border-radius: 5px;
  border: none;
  padding: 5px;
  width: 100px;
  height: 50px;
}

.button:hover {
  background: #1c1c1c;
  color: #fff;
  transition: 0.3s ease;
  cursor: pointer;
}

.button-primary {
  background: yellow;
  border-radius: 5px;
  border: none;
  padding: 5px;
  width: 100px;
  height: 50px;
  margin-bottom: 10px;
}

.button-primary:hover {
  background: #1c1c1c;
  transition: 0.3s ease;
}

.button-down {
  height: 70px;
  width: 70px;
  border-radius: 50%;
  border: 1px solid white;
  background: transparent;
  color: white;
}

.button-down:hover {
  background: white;
  color: #1c1c1c;
  border: 1px solid #1c1c1c;
  cursor: pointer;
}

<div>
  <div class="down">
    <button class='button-down'><i class='fas fa-arrow-down'></i></button>
  </div>

  <input type="text" name='email' id='email' placeholder='signup to our newsletter...'>
  <br>
  <button class='button-primary' type='submit' name='submit'>Submit</button>
</div>

Answer 1

您将样式表链接到了html吗？另外，.button-down中的in不在CSS中声明，而是具有.button。将.button替换为.button-down，然后重试。

.button-down{
    background: #fff;
    border-radius: 5px;
    border: none;
    padding: 5px;
    width: 100px;
    height: 50px;
}
.button-down:hover{
    background: #1c1c1c;
    color: #fff;
    transition: 0.3s ease;
    cursor: pointer;
}

Answer 2

我不好，我正在查看网站的移动版本，但忘记了从技术上讲鼠标将是手指，所以不会发生悬停。