Question

我有一个网站，上面有链接，容器img标签会将图片标签的不透明度转换为小于100％。这似乎适用于所有图像，除了一个，它只发生在一个页面上。在本页的底部http://www.saerdesigns.com/有一个VetPros图像，当我将它悬停在Chrome上（不确定其他浏览器）时，转换停止并开始，最终看起来非常笨重。对于同一页面上的任何其他图像，它似乎不会这样做，而且，使用相同样式表文件的此页面中的图像似乎工作正常http://www.saerdesigns.com/jobs。

这是我的相关CSS：

a {
  text-decoration: none;
  -webkit-transition: all 0.5s linear;
  -moz-transition: all 0.5s linear;
  -ms-transition: all 0.5s linear;
  -o-transition: all 0.5s linear;
  transition: all 0.5s linear;
  &:hover, &:active, &:link {
    text-decoration: none;
  }
}

a {
  img {
    @extend a;
    &:hover {
      opacity: 0.8;
    }
  }
}

这是HTML代码（可能看起来很奇怪，但那是因为我使用的是Angular）：

  <section class="container-fluid buffer" id="scroll-send-3">
    <div class="center-block text-center" ng-show="jobs[0]">
      <div class="row">
        <div ng-repeat="job in jobs" class="col-md-4 job">
          <a ui-sref="^.jobs.show({id: job.id})">
            <img class="img-responsive center-block" alt="{{job.company}}" ng-src="{{job.image_small}}"/>
          </a>
          <ul>
            <li>{{job.title}}</li>
          </ul>
        </div>
      </div>
      <div class="btn-group">
        <a class="btn btn-default btn-lg" ui-sref="^.jobs">Work history</a>
      </div>
    </div>
  </section>

如何防止这种情况发生？为什么会发生这种情况？

非常感谢！

Answer 1

~~〜如果您添加:hover，position: relative;可以正常工作。~~

或许最好添加transform: translate3d(0, 0, 1px);。我认为问题是因为您使用的是opacity。

我现在没有手头的解释，不得不去挖掘。也许明天我可以再次找到解释。

CSS庞大的悬停转换

1 个答案: