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

【问题标题】：How to highlight two divs when hovering one and excluding all other divs?悬停一个并排除所有其他div时如何突出显示两个div？
【发布时间】：2016-05-02 00:26:16
【问题描述】：

如何在悬停一个 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>

【问题讨论】：

标签： html css twitter-bootstrap hover

【解决方案1】：

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

您可以使用 jQuery hover 来获得您正在寻找的结果:)

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

【讨论】：

【解决方案2】：

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

}

希望这就是你的意思:~)

【讨论】：