仅在移除悬停时淡出

Question

我有一个div，它应该只在悬停时出现。但是当我加载页面时动画也出现了。我希望隐藏动画div，直到我将鼠标悬停在另一个div上。有没有办法阻止动画在加载页面时运行？

这是CSS：

#dim {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background: rgba(200, 200, 200, 0.8);
  z-index:100;
  padding: 5%;

  animation: fadeout 1s;
  animation-fill-mode: forwards;
}

#dim:hover{
  animation: fadein 1s;
  animation-fill-mode: forwards; 
}

/* Animations */

@keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes fadeout {
  from { opacity: 1; }
  to   { opacity: 0; }
}

这是一个CodePen：https://codepen.io/Martin36/pen/gWwmZO

Answer 1

代替关键帧，您可以使用css过渡并提供默认的不透明度0来解决此问题。

#dim {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background: rgba(200, 200, 200, 0.8);
  z-index:100;
  padding: 5%;
  opacity: 0;
  -webkit-transition: opacity 1s; /* Safari */
  transition: opacity 1s;
}

#dim:hover{
  opacity: 1;
}

Answer 2

＆＃13;

＆＃13;

div{
  height:100vh;
  width:100vw
}

#dim {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background: rgba(200, 200, 200, 0.8);
    z-index:100;
    padding: 5%;
    opacity:0 ;
  
  -webkit-transition: opacity 1s; /* Safari */
  transition: opacity 1s;

  
}

#dim:hover{
   opacity: 1;
}

/* Animations */

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}


@keyframes fadeout {
    from { opacity: 1; }
    to   { opacity: 0; }
}

/* Firefox < 16 */
@-moz-keyframes fadeout {
    from { opacity: 1; }
    to   { opacity: 0; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadeout {
    from { opacity: 1; }
    to   { opacity: 0; }
}

/* Internet Explorer */
@-ms-keyframes fadeout {
    from { opacity: 1; }
    to   { opacity: 0; }
}

/* Opera < 12.1 */
@-o-keyframes fadeout {
    from { opacity: 1; }
    to   { opacity: 0; }
}

＆＃13;

<div>
  <div style="background-color:red"></div>
  <div id="dim">
    <h1 class="header">Name of project</h1>
    <div class="description">
      Description of project
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

立即检查......