Question

我试图定义css样式，其中当悬停元素时，不透明度应该从0变为1.如果unhover没有发生，几秒钟之后不透明度应该将其值更改为0.

.selection:hover .player-icon {
    opacity: 1;

  transition-duration: 3s;
    -moz-transition: opacity .25s ease-in;
    -webkit-transition: opacity .25s ease-in;
    -o-transition: opacity .25s ease-in;*/
}

.player-icon {
    margin-left: 45%;
    margin-top: 21%;
    z-index: 999;
    position: absolute;
    width: 55px;
    height: 55px;
 opacity: 0;
   transition: opacity .5s ease-out;
 -moz-transition: opacity .5s ease-out;
    -webkit-transition: opacity .5s ease-out;
    -o-transition: opacity .5s ease-out;
}

Answer 1

使用keyframe animation。

@keyframes show-hide {
  0%   { color: red; }
  10% { color: white; }
  90% { color: white;}
  100% { color: red; }
}

.player-icon {
  display: inline-block;
  padding: 1em;
  color: red;
  background-color: red;
}

.player-icon:hover {
  animation: show-hide 3s linear;
}

Put your cursor on the red rectangle more than 3 seconds.<br><br>
<div class="player-icon">Play</div>

如何在我的css样式延迟后保留悬停状态的悬停状态

1 个答案: