Question

所以我创造了一个人在图像上盘旋时的过渡。这会使文本从底部出现，这样可以顺利进行。然而，当我移除鼠标并且悬浮状态被带走时，文本会迅速回到不透明状态，这会破坏效果。

我为此创建了一个codepen。将鼠标悬停在图片上即可查看我的意思。 http://codepen.io/acha5066/pen/bNxyob

这是我的sass :(我用指南针）

$grey: #eaeaea;

.content {
  width: 200px;
  margin: 0 auto;
  position: relative;
}

.content-header {
  img {
    max-width: 100%;
    height: auto;
  }
}
.content-main {
  position: absolute;
  top: 100%;
  left: 0;
  @include transition(all 1s ease);
  @include opacity(0);
  background-color: rgba($grey, 0.8);
  height: 0;
  overflow: hidden;
   .link {
    border-top: 1px solid darken($grey, 20%);
  }
}

.content:hover {
   .content-main {
    top: 0;
    left: 0;
    padding: 10px 0;
    background-color: darken(rgba($grey, 0.8), 20%);
    @include opacity(1);
    height: auto;
    overflow: visible;
  } 
}

UPDATE 按要求编译的CSS

.content {
  width: 200px;
  margin: 0 auto;
  position: relative;
}

.content-header img {
  max-width: 100%;
  height: auto;
}

.content-main {
  position: absolute;
  top: 100%;
  left: 0;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  -webkit-transition: all 1s ease;
  transition: all 1s ease;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  background-color: rgba(234, 234, 234, 0.8);
  height: 0;
  overflow: hidden;
}
.content-main .link {
  border-top: 1px solid #b7b7b7;
}

.content:hover .content-main {
  top: 0;
  left: 0;
  padding: 10px 0;
  background-color: rgba(183, 183, 183, 0.8);
  filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
  opacity: 1;
  height: auto;
  overflow: visible;
}

Answer 1

code pen

因此，如果您删除了height: 0上设置的overflow: hidden和.content-main，那么当您被淘汰时文本会崩溃。这里的文字淡入淡出

$grey: #eaeaea;

.content {
  width: 200px;
  margin: 0 auto;
  position: relative;
  @include transition(all 1s ease);
}

.content-header {
  img {
    max-width: 100%;
    height: auto;
  }
}
.content-main {
  position: absolute;
  top: 100%;
  left: 0;
  @include transition(all 1s ease);
  @include opacity(0);
  background-color: rgba($grey, 0.8);
   .link {
    border-top: 1px solid darken($grey, 20%);
  }
}

.content:hover {
   .content-main {
    top: 0;
    left: 0;
    padding: 10px 0;
    background-color: darken(rgba($grey, 0.8), 20%);
    @include opacity(1);
    height: auto;
    overflow: visible;
  } 
}

移除悬停状态时转换不顺畅

1 个答案: