Question

悬停时我想淡入渐变色。我工作得很好，但在鼠标离开时没有过渡回来。有什么问题，我该如何改进代码？

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)));

Answer 1

只需将您的背景移出:hover状态，直接移至.child，因为您只需设置opacity .child background这就是所需要的全部内容。它目前无法正常工作的原因还在于你只列出了一个{{1}}状态，对于悬停 - 当你没有悬停父母时，后台立即被删除（因为没有默认值存在）不透明度正在转变 - 所以你会看到跳跃＆＃39;

Demo Fiddle

Answer 2

您仅在悬停时将 bg-gradient 添加到子项。
将背景css属性移至{strong>默认状态（鼠标离开）<{strong>

<{1}}

这里效果很好http://jsfiddle.net/nvishnu/4paLf352/16/

CSS - 悬停时的渐变转换可以双向工作

2 个答案:

Demo Fiddle