Change attribute of multiple elements on hover by using CSS

Question

I have two div elements which are placed next to each other, i want to change the attribute background-color of both of them if the user hovers over one of them.

So the background-color should be initially set to #d8d8d8 for both divs and should change to #cacaca on both divs if i hover over one of the divs.

I solved it using jquery:

$("#FOO").hover
(
  function()
  {
      $(this).css("background-color","#CACACA");
      $("#BAR").css("background-color","#CACACA");
  },
  function()
  {
     $(this).css("background-color","#D8D8D8");
     $("#BAR").css("background-color","#D8D8D8");
  }
)

$("#BAR").hover
(
  function()
  {
      $(this).css("background-color","#CACACA");
      $("#FOO").css("background-color","#CACACA");
  },
  function()
  {
     $(this).css("background-color","#D8D8D8");
     $("#FOO").css("background-color","#D8D8D8");
  }
)

.buttons {
  border:1px solid black; 
  background-color: #D8D8D8;

  height: 100px;

  font-family: play;
  font-size: 30px;

  text-align:center;
  vertical-align: middle;
  line-height: 100px; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<div class="col-xs-10 buttons" id="FOO" style="border-right: 0px">
  <span style="padding-left:100px">FOO</span>
</div>
<div class="col-xs-2 buttons" id="BAR" style="border-left: 0px">
  <span>BAR</span>
</div>

Is there a better way to achieve this? Maybe only with css?

t1m0n · Accepted Answer · 2016-05-04 07:40:16Z

5

You can wrap columns in div and add :hover on it:

.buttons {
  border:1px solid black; 
  background-color: #D8D8D8;

  height: 100px;

  font-family: play;
  font-size: 30px;

  text-align:center;
  vertical-align: middle;
  line-height: 100px; 
}

.row:hover > .buttons {
    background-color: #CACACA;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<div class='row'>
  <div class="col-xs-10 buttons" id="FOO" style="border-right: 0px">
    <span style="padding-left:100px">FOO</span>
  </div>
  <div class="col-xs-2 buttons" id="BAR" style="border-left: 0px">
    <span>BAR</span>
  </div>
</div>

answered May 4, 2016 at 7:40

t1m0n

3,4411 gold badge20 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Upperface · Accepted Answer · 2016-05-04 07:41:22Z

3

I would give both divs the same css-class like so:

<div class="col-xs-10 buttons buttonset1" id="FOO" style="border-right: 0px">
  <span style="padding-left:100px">FOO</span>
</div>
<div class="col-xs-2 buttons buttonset1" id="BAR" style="border-left: 0px">
  <span>BAR</span>
</div>

Then in jquery you can make the following rule:

$(".buttonset1").hover
(
  function()
  {
      $(".buttonset1").css("background-color","#CACACA");
  },
  function()
  {
      $(".buttonset1").css("background-color","#D8D8D8");
  }
)

You are more flexible this way.

answered May 4, 2016 at 7:41

Upperface

1314 bronze badges

2 Comments

Gaurav Aggarwal Over a year ago

common class .buttons was already there and he want to use CSS not JS

Upperface Over a year ago

@GauravAggarwal indeed buttons is already present but if you want to have multiple sets of buttongroups, then you need to differentate. Also he did not state he want to use css, he asked if its maybe possible with css. I think a css-solution is more elegant but not as flexible.

Collectives™ on Stack Overflow

Change attribute of multiple elements on hover by using CSS

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related