Bootstrap table,hover cell to change ALL cells background color
Question
Have have the this bootstrap table:
<body leftmargin="0" topmargin="0" bgcolor="#ffffff" marginheight="0" marginwidth="0">
<div class="container-fluid h-100">
<div class="row float-right align-items-center" style="height: 5%;">
<div class="col-12">
langs
</div>
</div>
<div class="row w-100 text-center align-items-center" style="height: 85%;">
<div class="col-md-5">
hover1
</div>
<div class="col-md-2">
todo img
</div>
<div class="col-md-5">
hover2
</div>
</div>
<div class="row text-center align-items-center" style="height: 5%;">
<div class="col-12">
text end
</div>
</div>
</div>
</body>
I wanted to know when I hover "hover1" div if its possible to change all the table background to "black", using CSS, javascript, jQuery and html.
So far I tried to make css with hereditary class ex: .homeLeft:hover + .homeRight{} , but it's not working since I changed it to bootstrap table.
Any help/tips would be appreciated.
1 answers
solution1
2 2018-10-11 14:00:37
Try something like this:
.parent-hover { pointer-events: none; } .child-hover { pointer-events: auto; } .parent-hover:hover { background: yellow; }
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/> <div class="container-fluid h-100 parent-hover"> <div class="row float-right align-items-center" style="height: 5%;"> <div class="col-12"> langs </div> </div> <div class="row w-100 text-center align-items-center" style="height: 85%;"> <div class="col-md-5 child-hover"> hover1 </div> <div class="col-md-2"> todo img </div> <div class="col-md-5"> hover2 </div> </div> <div class="row text-center align-items-center" style="height: 5%;"> <div class="col-12"> text end </div> </div> </div>
If you want multiple children to change the parent color to something different you will probably have to use javascript:
$(function(){ function changeTableColor(color) { $(".parent").css("background-color", color); } $(".child-hover1").hover(function(){changeTableColor("yellow");}); $(".child-hover2").hover(function(){changeTableColor("red");}); $(".child-hover1").on("mouseleave", function(){changeTableColor("");}); $(".child-hover2").on("mouseleave", function(){changeTableColor("");}); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/> <div class="container-fluid h-100 parent"> <div class="row float-right align-items-center" style="height: 5%;"> <div class="col-12"> langs </div> </div> <div class="row w-100 text-center align-items-center" style="height: 85%;"> <div class="col-md-5 child-hover1"> hover1 </div> <div class="col-md-2"> todo img </div> <div class="col-md-5 child-hover2"> hover2 </div> </div> <div class="row text-center align-items-center" style="height: 5%;"> <div class="col-12"> text end </div> </div> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.