CODEWITHSUNDEEP
htmlcsstwitter-bootstraphover
LaLa Galindo
LaLa Galindo

Reputation: 1

How to highlight two divs when hovering one and excluding all other divs?

How to highlight two divs when hovering one and excluding all other divs? Is there a CSS way to do this?

I have a div table (.attribute) and two sections in it (col-att) with left column div (.box1) and right column div (.box2). I am trying to make box1 highlight when on hover and box2 when on hover excluding the opposite column, so give the impression that these two columns are separate when on hover.

I've tried many different css classes without success. It usually highlights one div cell (one .box1 or one .box2).

Here's my HTML code:

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

Upvotes: 0

Views: 280

Answers (2)

Star&#39;s Studio
Star&#39;s Studio

Reputation: 97

.Your Class:hover {
//Anything you put in here will happen on hover

}

Hope this is what you mean :~)

Upvotes: 0

Mikkel Fennefoss
Mikkel Fennefoss

Reputation: 909

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

You can use jQuery hover to get the result you are looking for :)

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

Upvotes: 1

Related Questions