引導表，懸停單元格以更改所有單元格的背景色

Question

擁有以下引導表：

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

我想知道當我將“ hover1” div懸停時是否有可能使用CSS，javascript，jQuery和html將所有表格背景更改為“黑色”。

到目前為止，我嘗試使用.homeLeft:hover + .homeRight{}類.homeLeft:hover + .homeRight{}創建CSS，但是由於我將其更改為Bootstrap表，因此它不起作用。

任何幫助/提示將不勝感激。

Answer 1

嘗試這樣的事情：

 .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>

如果您希望多個孩子將父顏色更改為其他顏色，則可能必須使用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>

引導表，懸停單元格以更改所有單元格的背景色

問題描述

1 個解決方案

解決方案1
2 2018-10-11 14:00:37

引導表，懸停單元格以更改所有單元格的背景色

問題描述

1 個解決方案

解決方案1 2 2018-10-11 14:00:37

解決方案1
2 2018-10-11 14:00:37