CSS悬停转换无法正常工作

Question

我有一个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>

Answer 1

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

以下代码段应证明:

.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>