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将所有表格背景更改为“ black”。

到目前为止，我尝试使用遗传类ex，例如.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 个答案: