有这个引导表:
<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 将所有表格背景更改为“黑色”。
到目前为止，我尝试使用遗传类 ex 制作 css:.homeLeft:hover + .homeRight{}，但自从我将其更改为 bootstrap 表后它就不起作用了。
如有任何帮助/提示，我们将不胜感激。
最佳答案
尝试这样的事情:
.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>如果您希望多个 child 将父颜色更改为不同的颜色，您可能必须使用 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>关于javascript - Bootstrap 表格，悬停单元格以更改所有单元格背景颜色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52761815/