Hover auf die Eltern keine Kinder Hintergrund

Question

überschreiben möchte ich die gleiche Hover-Effekt, wie dieser Website erreichen: http://educade.org/

Allerdings bin ich ein paar Probleme zu stoßen. Wenn ich beispielsweise versuche, auf dem übergeordneten div zu schweben, ändern sich die zuvor festgelegten Hintergrundfarben der untergeordneten divs nicht. Nur das "leere" Leerzeichen des Divs wird hervorgehoben.

Auch warum füllt die .box-div die verbleibende Höhe des .Videoclip Div nicht? Ich habe versucht, seine Höhe auf 100% zu setzen, aber es läuft ziemlich schlecht über.

Elternteil div

.videoclip{ 
    width:100%; 
    height: 300px; 
    max-height:300px; 
    background: #FFFFFF; 
    border-radius: 3px; 
    border: solid 1px #e3e3e3; 
} 

Beispiel der Kinder divs (mit bg Farbe)

.videoclip .box{ 
    background:#FFFFFF; 
    font-size: 1.1em; 
    display:block; 
    padding:10px 10px 10px 10px; 
    margin-bottom:10px; 
    overflow:hidden; 
} 

Hover

.videoclip:hover{ 
    background:#CCFF11 !important; 
} 

Hier ist der Link zu meinem vollständigen Code: http://codepen.io/anon/pen/XjvrEy

Ist es möglich, den gleichen Effekt mit einer einzigen Codezeile zu erzielen? (Anwendung des Hover auf dem Elternteil?)

Bitte schreiben Sie keine JS Lösungen für dieses Problem

Answer 1

Sie müssen das Kind-Element nach hover Ereignis hinzuzufügen:

.videoclip:hover .box 
{ 
     background: #CCFF11; 
} 

und Sie werden nicht müssen important

Answer 2

einfach den Hintergrund von .videoclip.box entfernen

.videoclip .box{ 
background:#FFFFFF; 
font-size: 1.1em; 
display:block; 
padding:10px 10px 10px 10px; 
margin-bottom:10px; 
overflow:hidden; 
} 

oder hinzufügen:!

.videoclip:hover .box{ 
background:#CCFF11 !important; 
} 

Die importants mehr dann nicht notwendig sind, aber vielleicht hast du anderen Code, der es in Zukunft auch benötigt.

Für den verbleibenden Platz, überprüfen Sie Ihre Maring-Bottoms. Sie sind bei 10px und 20px, was der verbleibende Platz ist.