Question

如何在悬停一个div并排除所有其他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 hover来获取您正在寻找的结果：）

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

Answer 2

。你的班级：悬停{
//你在这里放的任何东西都会在悬停时发生

}

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

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

2 个答案: