Question

当我将鼠标悬停在上面时，过渡效果很好，但是当我放开鼠标后，它不会将BACK过渡到原始状态。

我已解决此问题，但不记得如何解决。在我的其他代码中，这就是我现在所拥有的

.loginbtn button {
  background: transparent;
  border: none;
  border: solid 2px #fff;
  color: #fff;
  font-size: 30px;
  font-family: 'Archivo Narrow Bold';
  border-radius: 10px;
  padding: 10px 50px 10px 50px;
  margin-top: 35%;
  cursor: pointer;
}

button:hover {
  background-color: #70d8d1;
  color: #0B0C10;
  border:solid 2px #70d8d1;
  transition: 0.3s;
}

.loginbtn button:focus {
  outline: none;
}

当我将鼠标悬停在其上和“悬停”它时，它应该同时过渡。但这只是第一次。

Answer 1

始终在元素上而不是在transition状态下设置:hover css属性。因此，您将从transition: 0.3s;中删除button:hover并将其放置在button中。

button {
  background: transparent;
  border: none;
  border: solid 2px #fff;
  color: #fff;
  font-size: 30px;
  font-family: 'Archivo Narrow Bold';
  border-radius: 10px;
  padding: 10px 50px 10px 50px;
  margin-top: 35%;
  cursor: pointer;
  transition: all 0.3s;
}

button:hover {
  background-color: #70d8d1;
  color: #0B0C10;
  border:solid 2px #70d8d1;
}

.loginbtn button:focus {
  outline: none;
}

<button>Hello!</button>

Answer 2

您需要将过渡放在元素本身上，而不是悬停状态上，否则，一旦移开鼠标，它将失去过渡属性并恢复为原始颜色。

button {
  background: transparent;
  border: none;
  border: solid 2px #fff;
  color: #fff;
  font-size: 30px;
  font-family: 'Archivo Narrow Bold';
  border-radius: 10px;
  padding: 10px 50px 10px 50px;
  margin-top: 35%;
  cursor: pointer;
  transition: 0.3s;
}

button:hover {
  background-color: #70d8d1;
  color: #0B0C10;
  border:solid 2px #70d8d1;
}

将鼠标悬停在按钮上后，悬停过渡不起作用

2 个答案: