Question

我目前正在reddit.com上编辑subreddit，我的方法仅限于仅限CSS 。当您将鼠标悬停在左侧的菜单上时，我设法获得了叠加效果。它正在消失，但我不知道如何消除它。由于转换不起作用我尝试了另一种带动画的方法。

TL; DR：叠加淡入：是 - 淡出：否：（

以下是我使用的代码的一些部分：

#sr-header-area .drop-choices:hover:before {
   content: "";
   font-size: 13px;
   display: block;
   position: fixed !important;
   height: 100%;
   width: 100%;
   margin-left: 300px;
   pointer-events: none;
   z-index: 700 !important;
   animation: fade 0.5s ease;
   -webkit-animation-fill-mode: forwards;
   animation-fill-mode: forwards;}

@keyframes fade {
   0% {background-color: rgba(0, 0, 0, 0);}
   100% {background-color: rgba(0, 0, 0, 0.4);}}

也许有人可以帮助我。

Answer 1

你应该能够通过过渡实现这种效果，这将是我个人推荐的方式。这是一个快速实施：https://jsfiddle.net/z1c8bvcd/1/

要记住的主要事情是你需要定义一旦悬停状态不再有效，div将返回的CSS属性，而不仅仅是悬停时它们的样子，否则将删除：before伪元素来自DOM。

#foo:before {
  content: "";
  background: rgba(255, 255, 255, 0);
  transition: background 0.5s, margin-left 0.5s;
  width: 100%;
  height: 100%;
  position: fixed!important;
  margin-left: 50px;
}

#foo:hover:before {
  background: rgba(0, 0, 0, 0.3);
  margin-left: 300px;
}

我认为您也可以使用关键帧实现类似的效果，但我认为动画会在页面加载时运行一次，然后在div悬停时运行。

使叠加层缓慢淡出？

1 个答案: