如何改變背景顏色上徘徊了整個行自舉3

Question

Actuly我想打一個網格小塊像下面的圖片

我的所有列是在一個父DIV這就是爲什麼我很unbale在整個行上懸停時更改bg顏色。 如果我使用多行作爲cloumns比這些列的parnet不會正確地談到對方。

HTML：

<div class="container grid-layout"> 
    <div class="row"> 
     <div class="col-xs-12 col-md-3 col-sm-3"> 
      <div class="name">Supercity</div> 
     </div> 

     <div class="col-xs-12 col-md-3 col-sm-3"> 
      <div class="name">Supercity</div> 
     </div> 

     <div class="col-xs-12 col-md-3 col-sm-3"> 
      <div class="name">Supercity</div> 
     </div> 

     <div class="col-xs-12 col-md-3 col-sm-3"> 
      <div class="name">Supercity</div> 
     </div> 

     <div class="col-xs-12 col-md-3 col-sm-3"> 
      <div class="name">Supercity</div> 
     </div> 

     <div class="col-xs-12 col-md-3 col-sm-3"> 
      <div class="name">Supercity</div> 
     </div> 

     <div class="col-xs-12 col-md-3 col-sm-3"> 
      <div class="name">Supercity</div> 
     </div> 

     </div> 
    </div> 

CSS：

.grid-layout .row .col-md-3{ 
    text-align: center; 
    border-bottom:#eee solid 1px; 
} 
.grid-layout .row .col-md-3 > a{ 
    padding:10px 0; 
    display: inline-block; 
    width:100%; 
    color:#999999; 
    outline: none; 
} 
.grid-layout .row .col-md-3 > a:hover{ 
    color:#5fa9e3; 
    text-decoration: none; 
} 
.grid-layout .row .col-md-3:hover{ 
    background: #f7f7f7; 
    cursor: pointer; 

} 
.name{ 
    padding:15px 0; 
} 

請讓我知道什麼是正確的做法。

Answer 1

如果你只是想改變.row背景顏色，這將工作。

$('body > div > div').on("mouseover", function() { 
    $(this).css("background-color", "red"); 
}); 

Answer 2

您可以嘗試使用CSS這個是這樣的：

.row:hover div[class^="col-"]{ 
    background-color: #dcdcdc; 
} 

希望這是你在找什麼。