图片悬停标志

Question

我一直在玩css悬停效果，但我不能搞清楚如何让灰度工作。

悬停效果在悬停“bg”图像时工作正常，但当光标击中“logo”图像时，“bg”的灰度停止。

我想让它工作，所以只有“bg”是悬停的灰度而不是徽标。

你可以在这里看到它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 --> 

这里是上海社会科学院

.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

解决方案：http://codepen.io/anon/pen/YNOEMq

.col-md-6 
    position: relative 
    overflow: hidden 
    width: 100% 
    height: 25rem 
    padding: 0 

    &:hover .bg 
    -webkit-filter: grayscale(90%) 
    filter: grayscale(90%) 
    ... 

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