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>

Answer 2

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

＆＃13;

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

＆＃13;

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

＆＃13;

我希望这会有所帮助。

CSS悬停转换无法正常工作

2 个答案: