div中span元素的悬停和mouseout的不同CSS转换延迟？

Question

我在网上看过使用：hover伪类来模拟CSS3中鼠标悬停/鼠标移动效果的例子...我希望子元素在其父元素悬停时出现，但是我我希望子元素在mouseout上有不同的延迟消失（我的文本目前缓慢缓慢进出，但我更喜欢它在缓出时快速消失）。我的代码设置方式，：hover伪元素自然不适合这种效果......有什么想法吗？

＆＃13;

＆＃13;

div {
  font-size: 72px;
  margin-top: 50px;
  transition-delay
}
section {
  display: table; margin: 0 auto;
}
.boots {
  width: 50px;
  background-color: grey;
  transition: width 1s;
  display: inline-block;
}
.laugh {
  width: 50px;
  background-color: red;
  transition: width 1s;
  display: inline-block;
}
.awesome {
  width: 54px;
  background-color: orange;
  transition: width 1s;
  display: inline-block;
}
.happy {
  width: 52px;
  background-color: green;
  transition: width 1s;
  display: inline-block;
}
div > span {
  position: absolute;
  display: inline;
  visibility:hidden;
  opacity:0;
  transition:visibility 0s linear 0.5s,opacity 0.5s linear;
}
div:hover > span {
  position: absolute;
  display: inline;
  visibility:visible;
  opacity:1;
  transition-delay:0.5s;
}

.boots:hover {
  width: 170px; 
}
.laugh:hover {
  width: 190px;
}
.awesome:hover {
  width: 290px;
}
.happy:hover {
  width: 195px;
}

＆＃13;

<section>
  <div class = "boots">B<span>oots</span></div>
  <div class = "laugh">L<span>augh</span></div>
  <div class = "awesome">A<span>wesome</span></div>
  <div class = "happy">H<span>appy</span></div>
</section>

＆＃13;

＆＃13;

＆＃13;

Answer 1

在正常状态div > span中将转换延迟设置为0很容易（意味着当您的转换从悬停状态返回到正常状态时，延迟应该为0，这将使文本更快地消失）

注意：我已将转换延迟属性添加到div > span，其值为0s，这是将鼠标移出时更快地淡化文本的关键

＆＃13;

＆＃13;

    div {
      font-size: 72px;
      margin-top: 50px;
      transition-delay
    }
    section {
      display: table; margin: 0 auto;
    }
    .boots {
      width: 50px;
      background-color: grey;
      transition: width 1s;
      display: inline-block;
    }
    .laugh {
      width: 50px;
      background-color: red;
      transition: width 1s;
      display: inline-block;
    }
    .awesome {
      width: 54px;
      background-color: orange;
      transition: width 1s;
      display: inline-block;
    }
    .happy {
      width: 52px;
      background-color: green;
      transition: width 1s;
      display: inline-block;
    }
    div > span {
      position: absolute;
      display: inline;
      visibility:hidden;
      opacity:0;
      transition:visibility 0s linear 0.5s,opacity 0.5s linear;
      transition-delay:0s;
    }
    div:hover > span {
      position: absolute;
      display: inline;
      visibility:visible;
      opacity:1;
      transition-delay:0.5s;
    }

    .boots:hover {
      width: 170px; 
    }
    .laugh:hover {
      width: 190px;
    }
    .awesome:hover {
      width: 290px;
    }
    .happy:hover {
      width: 195px;
    }

＆＃13;

 <section>
      <div class = "boots">B<span>oots</span></div>
      <div class = "laugh">L<span>augh</span></div>
      <div class = "awesome">A<span>wesome</span></div>
      <div class = "happy">H<span>appy</span></div>
    </section>

＆＃13;

＆＃13;

＆＃13;