ロゴ付き画像ホバー

Question

私はCSSホバー効果で遊んでいましたが、グレースケールがどのように機能するかはわかりません。

ホバー効果は「bg」画像をホバーするとうまくいきますが、カーソルが「ロゴ」画像に当たると、「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 --> 

そしてここでは、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

ソリューション：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に影響を与えることです。