Question

我一直在玩css悬停效果，但我无法弄清楚我是如何让灰度工作的。

当悬停＆＃34; bg＆＃34时，悬停效果正常。图像，但当光标击中＆＃34;徽标＆＃34;想象一下＆＃34; bg＆＃34;的灰度。停止。

我想让它工作，所以只有＆＃34; bg＆＃34;悬停时是灰度，而不是徽标。

您可以在此处查看http://codepen.io/Tonzr/pen/dNqVQQ

HTML

<div class="container">
  <div class="row">

    <a href="" class="col-md-6">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample36.jpg" class="bg">
      <img src="http://placehold.it/200x90/000000?text=LOGO" class="logo">
    </a>

    <a href="" class="col-md-6">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample83.jpg" class="bg">
      <img src="http://placehold.it/200x90/000000?text=LOGO" class="logo">
    </a>

  </div><!-- END ROW -->
</div><!-- END CONTAINER -->

这是SASS

.col-md-6
  position: relative
  overflow: hidden
  width: 100%
  height: 25rem
  padding: 0
  .bg
    position: absolute
    left: 50%
    top: 50%
    height: auto
    width: 100%
    -webkit-transform: translate(-50%,-50%)
    -ms-transform: translate(-50%,-50%)
    transform: translate(-50%,-50%)
    &:hover
      -webkit-filter: grayscale(90%)
      filter: grayscale(90%)
  .logo
    position: absolute
    top: 50%
    left: 50%
    margin-right: -50%
    transform: translate(-50%, -50%)

感谢您的时间。

Answer 1

解决方案：The API documentation

{{1}}

问题是，如果光标进入徽标元素，悬停事件传播将不会到达bg元素，因为它们是兄弟姐妹。因此解决方案是在父锚元素处捕获悬停事件，然后影响子bg。

图像悬停与徽标

1 个答案: