html - 如何通过悬停过渡使元素变暗？

Question

我有这个代码:

<div class="link" id="link1">
    <h1>Lorem Ipsum</h1>
</div>
<div class="link" id="link2">
    <h1>Lorem Ipsum</h1>
</div>

---

.link{
    display: inline-block;
    width: 100%;
    height: 50%;
    float: left;
    transition:0.25s;
}
.link:hover {
    background: linear-gradient(
      rgba(0, 0, 0, 0.25), 
      rgba(0, 0, 0, 0.25));
    transition:0.25s;
}

当您将鼠标悬停在它上面时，这会使 .link 变暗，但我很想知道是否可以向它添加过渡。

编辑:我应该首先明确这一点。我有多个链接，当您将鼠标悬停在链接上时，我希望所有链接都过渡到它们自己颜色的较暗版本。我已经更新了之前的 fiddle 。

Jsfiddle:http://jsfiddle.net/rpo12dhx/5/

Answer 1

如果您只想在 :hover 上过渡到较暗的颜色，则不需要 linear-gradient。您可以简单地过渡到较深的颜色。

此外，您没有指定 transition-property(即 background)。

.link {
  display: inline-block;
  width: 100%;
  height: 50%;
  background: #394053;
  transition: background 0.8s;
}
.link:hover {
  background: #172032;
}

<div class="link" id="link1">
  <h1>Lorem Ipsum</h1>
</div>