当前位置: 动力学知识库 > 问答 > 编程问答 >

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

问题描述:

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.

网友答案:

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

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

You can try this using CSS like this:

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

Hope this is what you are looking for.

分享给朋友:
您可能感兴趣的文章:
随机阅读: