在div上悬停时添加透明度，但有时间延迟

Question

我希望我的div在我将光标悬停在其上后1秒变得部分透明。当不再悬停时，我希望它立即返回其默认的完全不透明度，没有任何时间延迟。 我非常了解javascript，所以我不知道该怎么做。

任何帮助非常感谢提前感谢

Answer 1

实际上，在这种情况下你不应该使用js。 CSS Transitions会更好，因为它们比js / jQuery动画更流畅，更有效。

下面是悬停时延迟2秒的示例。

＆＃13;

＆＃13;

.btn{
  display: inline-block;
  padding: 5px 10px;
  background: rgba(0,0,0,1);
  color: #fff;
  text-decoration: none;
  -webkit-transition: background 0.5s ease 0s;
  transition: background 0.5s ease 0s;
}
.btn:hover{
  -webkit-transition: background 0.5s ease 2s;
  transition: background 0.5s ease 2s;
  background: rgba(0,0,0,0.5);
}

＆＃13;

<a href="#" class="btn">Text</a>

＆＃13;

＆＃13;

＆＃13;