圖片懸停標誌

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。