Bild schweben mit Logo

Question

Ich habe mit einem CSS-Hover-Effekt herum gespielt, aber ich kann nicht herausfinden, wie ich die Graustufen zum Arbeiten bekommen.

Die Hover-Effekte funktionieren gut, wenn Sie das "bg" -Bild bewegen, aber wenn der Cursor auf das "Logo" -Bild trifft, stoppt die Graustufe des "bg".

Ich möchte es funktioniert so nur die "bg" ist Graustufen auf Hover und nicht das Logo.

Sie können es sehen hier http://codepen.io/Tonzr/pen/dNqVQQ

der 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 --> 

Und hier ist die 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%) 

Vielen Dank für Ihre Zeit.

Answer 1

Lösung: 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%) 
    ... 

Das Problem ist, wenn sich der Cursor auf das Logo Element eintritt, wird das Hover Ereignispropagierung nicht bg Element erreichen, wie sie Geschwister sind. Die Lösung besteht also darin, das Hover-Ereignis beim übergeordneten Ankerelement abzufangen und dann das untergeordnete bg zu beeinflussen.