CSS：颜色在悬停时淡入，但当鼠标移开时我无法让它淡出

Question

我正在构建一个投资组合网站，我希望每个项目的 div 在悬停时都可以更改颜色。我已经对其进行了编码，因此当鼠标悬停在 div 上时，背景颜色和文本会缓慢变化。但是，当鼠标移开时，它会突然变回颜色。我希望它慢慢（而不是突然）淡回到原来的颜色，如果可能的话使用 CSS。

HTML:

    <div class="hacker col-xl-6 col-md-6 mb-4">
        <a href="http://text.com/filler/">
      <div class="card card-body border-0 shadow">
        <img src="img/filler.png" class="card-img-top" alt="Filler">
        <div class="card-body text-center">
          <h5 class="title1 mb-0">Filler</h5>
          <div class="subtitle ">Web Design</div>
        </div>
      </div>
    </a>
    </div>

CSS:

    .card:hover{
        background-color: #12455a;
        color: ##fff;
        -webkit-transition: background-color .3s;
        transition: background-color .3s; 
    }

    .card:hover .title1 {
        color: #fff !important;
    -webkit-transition: background-color .3s;
    transition: background-color .3s; }

.card:hover .subtitle {
    color: #fff !important;
    -webkit-transition: background-color .3s;
    transition: background-color .3s;
}

我希望当鼠标离开元素时，颜色会淡出到原始状态，过渡时间与淡入时相同，但目前颜色突然变回。

Answer 1

您想将 transition 直接应用到 .card， 而不是 :hover:

.card {
  -webkit-transition: background-color .3s;
  transition: background-color .3s;
}

.card:hover {
  background-color: #12455a;
  color: #fff;
}

<div class="hacker col-xl-6 col-md-6 mb-4">
  <a href="http://text.com/filler/">
    <div class="card card-body border-0 shadow">
      <img src="img/filler.png" class="card-img-top" alt="Filler">
      <div class="card-body text-center">
        <h5 class="title1 mb-0">Filler</h5>
        <div class="subtitle ">Web Design</div>
      </div>
    </div>
  </a>
</div>

另请注意，您只需将其应用于 .card 本身，而不是子元素。

顺便说一句，您不需要在子元素上设置 color，因为它会从父元素 .card:hover 向下级联（尽管您有语法错误阻止它发生在你上面的代码中——我已经在我的例子中解决了这个问题。

CSS：颜色在悬停时淡入，但当鼠标移开时我无法让它淡出

CSS: Color fades in on hover but I cant get it to fade away when the mouse moves away

css

hover

background-color