Css Hover Selector sollte komplette Zeile

Question

Ich möchte, dass die komplette Zeile ausgewählt ist und nicht nur ein Element in dieser Zeile. Auch die Auswahl sollte nicht auf Padings und Ränder achten und nur die volle Breite und die Größe des größten Elements für alle Elemente nehmen.

JSFiddle: https://jsfiddle.net/t3uz2r52/1/ HTML:

<div class="container"> 
    <div class="row"> 
     <div class="col-xs-2"> 
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/13/Disc_Plain_red.svg/460px-Disc_Plain_red.svg.png" class="img-responsive status"> 
     </div> 
     <div class="col-xs-4 myimg"> 
      <img src="https://i.ytimg.com/vi/KlULoQj3nao/maxresdefault.jpg" class="img-responsive"> 
     </div> 
     <div class="col-xs-6 description"> 
      <p> 
       Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna 
       aliquyam erat, 
      </p> 
     </div> 
    </div> 
</div> 

Css:

.row :hover { 
    background-color: green; 
} 

Answer 1

einfach Ihre CSS ändern

.row:hover { 
    background-color: green; 
} 

Dabei können Sie :hover Wähler auf ganze Zeile zuweisen. Lesen Sie mehr über Pseudo-class selectors.

Hier haben Sie Ihre jsfiddle aktualisiert.

Answer 2

Es ist, weil Sie ein Leerzeichen vor :hover haben, die es auf Elemente Kind gilt anstelle des .row Element.

.row:hover { // There should be no space before :hover 
    background-color: green; 
}