gpt4 book ai didi

javascript - Bootstrap 表格,悬停单元格以更改所有单元格背景颜色

转载 作者:太空宇宙 更新时间:2023-11-04 01:03:08 26 4
gpt4 key购买 nike

有这个引导表:

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

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com