Css懸停選擇器應選擇完整的行

Question

我希望選擇完整的行，而不僅僅是該行中的元素。此外，選擇不應該關心填充和邊距，而只需要獲取所有元素的最大元素的全寬和大小。

的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

只要改變你的CSS來

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

因此你可以分配:hover選擇到整行。詳細瞭解Pseudo-class selectors。

這裏是你更新你的jsfiddle。

Answer 2

那是因爲你擁有它適用於子元素，而不是.row元素:hover之前的空間。

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