悬停一个 div 并排除所有其他 div 时如何突出显示两个 div

Question

悬停一个并排除所有其他div 时如何突出显示两个div？有没有CSS方法可以做到这一点？

我有一个div 表（.attribute）和其中的两个部分 （col-att），左列div （.box1） 和右列div （.box2）。我试图在悬停时突出显示 box1，在悬停时突出显示 box2，排除对立的列，因此给人的印象是这两列在悬停时是分开的。

我尝试了许多不同的 css 类但没有成功。它通常突出显示一个div 单元格（一个 .box1 或一个 .box2）。

这是我的HTML代码：

<div class="bg-white attribute">
    <div class="row">
        <div class="col-att box1 col-md-6 col-lg-3">
            <label class="p-t-7">Liability Dispute</label>
        </div>   
        <div class="col-att box1 col-md-6 col-lg-3">
            <div class="pull-right">
                <btn class="btn btn-ar btn-sm" ng-model="radioModel" uib-btn-radio="'Ar'" uncheckable><i class="fa fa-check"></i></btn>
                <btn class="btn btn-re btn-sm" ng-model="radioModel" uib-btn-radio="'Re'" uncheckable><i class="fa fa-check"></i></btn>
                <btn class="btn btn-au btn-sm" ng-model="radioModel" uib-btn-radio="'Au'" uib-uncheckable="uncheckable"><i class="fa fa-check"></i></btn>
            </div>
        </div>
        <div class="col-att box2 col-r col-md-6 col-lg-3">
            <label class="p-t-7">Salvage Damage Dispute</label>
        </div>   
        <div class="col-att box2 col-md-6 col-lg-3">
            <div class="pull-right">
                <btn class="btn btn-ar btn-sm" ng-model="radioModel" uib-btn-radio="'Ar'" uncheckable><i class="fa fa-check"></i></btn>
                <btn class="btn btn-re btn-sm" ng-model="radioModel" uib-btn-radio="'Re'" uncheckable><i class="fa fa-check"></i></btn>
                <btn class="btn btn-au btn-sm" ng-model="radioModel" uib-btn-radio="'Au'" uib-uncheckable="uncheckable"><i class="fa fa-check"></i></btn>
            </div>
        </div>
    </div>             
</div>

Answer 1

$( ".HoverOver" ).hover(
  function() {
    $( ".highlighted" ).addClass( "hover" );
  }, function() {
    $( ".notHighlighted" ).removeClass( "hover" );
  }
);

您可以使用jQuery悬停来获取您要查找的结果:)

https://api.jquery.com/hover/

Answer 2

.您的班级：悬停 {
您在此处输入的任何内容都将在悬停时发生

}

希望这就是你的意思：~）