How to change the bg color on hover for entire row in bootstrap 3

Question

Actuly i want to make a grid tiles like below image

My all columns comes in a parent div thats why i am unbale to change the bg color on hover for entire row. If i use multiple rows as a parnet for cloumns than these columns wont comes correctly to each other.

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;
}

Please let me know what would be the correct approach.

Answer 1

You can try this using CSS like this:

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

Hope this is what you are looking for.

Answer 2

If you just want to change the .row background-color this will work.

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