Question

.box {
  width: 100px;
  height: 100px;
  background: blue;
}

.circle {
  margin-top: 20px;
  width: 80px;
  height: 80px;
  border-radius: 100%;
  background: red;
  opacity: 0;
  transition: opacity 0.5s ease;
 }

.box:hover + .circle {
  opacity: 1;
}

<body>
  <div class="box">
  </div>
  <div class="circle">
  </div>
 </body>

此处，当我将鼠标悬停在.box上时，.circle会在0.5秒内淡入。

现在，当我将光标移离.box时，我希望.circle以不同的速度淡出（例如，1s）。如何实现？

Answer 1

您需要在非悬停状态下设置关闭持续时间，并在悬停时设置开启持续时间。

这是因为一旦你悬停，:hover属性优先（假设你的选择器被正确指定），所以你的悬停时间将适用。悬停后，普通元素上设置的属性将适用。

＆＃13;

.box {
  width: 100px;
  height: 100px;
  background: blue;
}
.circle {
  margin-top: 20px;
  width: 80px;
  height: 80px;
  border-radius: 100%;
  background: red;
  opacity: 0;
  transition: opacity 2s ease;
}
    
.box:hover + .circle {
  opacity: 1;
  transition-duration:0.5s
}

＆＃13;

<div class="box"></div>
<div class="circle"></div>

＆＃13;

转换开始和结束的持续时间不同？

1 个答案: