CSS悬停过渡无法正常工作答案

【问题标题】：CSS hover transition is not working properlyCSS悬停过渡无法正常工作
【发布时间】：2018-02-08 16:57:45
【问题描述】：

我有一个 div。我想在悬停效果上在这个 div 上做边框。而且这个边框应该带有过渡效果。它工作正常。但是我的问题是当我从div中移动鼠标时，边框直接没有任何过渡效果。这是我的 div

.pending:hover{
     -webkit-transition: border .35s ease-in-out;
     transition: border .35s ease-in-out;
     border: 2px solid red;
}

<div class="pending">
   <h2>this is title </h2>
   <button>Menu</button>
   <button>Menu</button>
   <button>Menu</button>
</div>

【问题讨论】：

标签： html css

【解决方案1】：

发生这种情况是因为您仅将过渡效果应用于悬停状态。一旦悬停状态消失，转换本身也消失了。此外，没有指定边框样式，因此没有要转换到的状态。

下面的sn-p应该演示：

.pending {
  border: 0px solid red;
  -webkit-transition: border .35s ease-in-out;
  transition: border .35s ease-in-out;
}

.pending:hover{
  border: 2px solid red;
}

<div class="pending">
  <h2>this is title</h2>
  <button>Menu</button>
  <button>Menu</button>
  <button>Menu</button>
</div>

【讨论】：

@Fokrule 可以移除从 :hover 状态的转换 ;)

【解决方案2】：

如果您仅在 .pending 类和白色边框上设置过渡，然后在悬停时创建红色边框：

.pending {
  -webkit-transition: border .35s ease-in-out;
  transition: border .35s ease-in-out;
  border: 2px solid white;
}

.pending:hover {
  border: 2px solid red;
}

<div class="pending">
  <h2>this is title </h2>
  <button>Menu</button>
  <button>Menu</button>
  <button>Menu</button>
</div>

我希望这会有所帮助。

【讨论】：

太好了，请尽可能接受答案:)