Question

背景资料：

我有一个页面里面装满了bootstrap 3 .thumbnail个元素，里面有内容。我使用CSS在元素中添加box-shadow：

.thumbnail {
  display: inline-block;
  width: 97%; /*Needed to show box shadow*/
  border: 2px solid $subdued;
  margin: 0 2px 15px;
  padding: 5px 15px;
  background: $bg-color;
  background: -webkit-linear-gradient(45deg, #FFF, #F9F9F9);
  opacity: 1;
  position: relative;
  @include transition(all, 0.4s, ease);

  &:before, &:after {
    z-index: -1;
    position: absolute;
    content: "";
    bottom: 15px;
    left: 10px;
    width: 50%;
    top: 80%;
    max-width: 100%;
    background: rgba(0,0,0,0.6);
    box-shadow: 0 20px 10px rgba(0,0,0,0.6);
    @include transform( rotate(-3deg) );
    @include transition(all, 0.1s, ease);
  }

  &:after {
    @include transform( rotate(3deg) );
    right: 10px;
    left: auto;
  }
}

注意：@include语句只是SASS mixins，用于供应商前缀;与混合的问题无关。

这个CSS很有效，直到我为悬停状态添加一些代码;当用户将鼠标悬停在.thumbnail上时，我希望所有其他.thumbnail元素将其opacity减少到0.4。为此，我添加了以下CSS：

.deckgrid:hover .thumbnail:not(:hover) { opacity: 0.4 }
.deckgrid:hover .thumbnail:not(:hover):before,
.deckgrid:hover .thumbnail:not(:hover):after { opacity: 0; }

注意：.deckgrid只是<div>的包装.thumbnail。

问题：

当我将鼠标悬停在.thumbnail上时，该特定.thumbnail的行为符合预期;但是，页面上的所有其他缩略图都会被::before和::after伪元素重叠大约一秒钟，然后再进行自我修正。这导致过渡看起来不稳定和奇怪。

关于如何解决这个问题的任何想法？

创建的阴影：after和：重叠父onHover之前

0 个答案: