CODEWITHSUNDEEP
javascriptjqueryhtmlcssbootstrap-4
Pbras
Pbras

Reputation: 189

Bootstrap table,hover cell to change ALL cells background color

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.

Upvotes: 0

Views: 287

Answers (1)

Glitcher
Glitcher

Reputation: 1184

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>

Upvotes: 2

Related Questions