html - CSS-悬停时的渐变过渡确实可以双向工作

悬停时，我要渐变。我工作正常，但是在鼠标离开时没有过渡。有什么问题，我该如何改善代码？

jsfiddle

的HTML

<header class="parent">
Hover here!
    <div class="child"></div>


</header>

的CSS

.child {
  height: 100px;
   position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  z-index: -1;
      opacity: 0;
  -webkit-transition: all 1s ease-out;
  -moz-transition: all 1s ease-out;
  -o-transition: all 1s ease-out;
  /* Opera */
  transition: all 1s ease-out;
  /* Standard */ }



.parent {
    height: 120px;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 100;
      opacity: 1 !important; }


  .parent:hover .child {
    opacity: 1;
    background: -moz-linear-gradient(top, #ededed 0%, #ededed 30%, rgba(237, 237, 237, 0) 99%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ededed), color-    stop(30%, #ededed), color-stop(99%, rgba(237, 237, 237, 0)));

最佳答案

只需将背景从:hover状态直接移到.child即可，因为您只是在为opacity的.child设置动画，所以这就是必需的。当前不起作用的原因还在于您只列出了单个background状态，即对于悬停状态-当您不悬停其父对象时，尽管不透明，背景也会被立即删除（因为不存在默认值）正在过渡-所以您会看到“跳跃”

Demo Fiddle