Changing property of an element on hover of another element

Question

I have two different divs, on hover of one div I'm trying to change the property(box-shadow) of this div + another div. i.e in below example on hover of div one-two both one-two and one-one should have box-shadow added to them.

I found some answer in stackoverflow which said .div1:hover + .div2, but this doesn't seem to be working. (Is there any way to hover over one element and affect a different element?). Is there any other solution or am I doing something wrong ?

@import url(https://fonts.googleapis.com/css?family=Open+Sans:700,300);
.container {
  display: block;
  max-width: 100%;
}
.header {
  width: 100%;
  position: absolute;;
  /*border-bottom: 1px solid black;*/
  height: 10%;
  background-color: teal;
  margin: -9px;
  padding-top: 15px;
  box-shadow: 2px 5px 4px #ccc ;
  text-align: center;
  font-size: 20px;
  text-transform: uppercase;
  font-family: sans-serif;
  font: Helvetica;
  color: #ccc

}
.canvas-frame {
  position: absolute;
  left: 30%;
  top: 20%;
  width: 600px;
  height: 400px;
  background: linear-gradient(to left bottom, #2DBE60, #246DE9);
  box-shadow: 3px 3px 5px 2px #ccc;
}
.frame {
  position: absolute;
  left: 30%;
  top: 20%;
  width: 600px;
  height: 400px;
  background: linear-gradient(to left bottom, #2DBE60, #246DE9);
  box-shadow: 3px 3px 5px 2px #ccc;
}
.one-one {
   position: absolute;
   z-index: 0;
   top: 0;
   left: 36px;
   height: 40px;
   width: 20px;
   background: #fff;
  margin-top:30px;
   border-radius: 3px;
   transform: rotate(50deg);
   box-shadow: 0 0 13px 0 rgba(0,0,0,0.2);
 }
 .one-two {
   position: absolute;
   background: #fff;
   height: 100px;
   width: 20px;
   border-radius: 3px;
   margin-top : -20px;
   top: 51px;
   left: 51px;
   z-index: 1;
   box-shadow: 0 0 13px 0 rgba(0,0,0,0.2);
 }
 .zero-one,.zero-two {
   position: absolute;
   z-index: 2;
   top: 50;
   left: 62px ;
   box-sizing: border-box;
   height: 100px;
   width: 100px;
   margin-top : 30px;
   border-radius: 50%;
   border: 24px solid #fff;
   box-shadow: 0 0 13px 0 rgba(0,0,0,0.2);
 }
 .zero-two {
   left: 152px !important;
 }
.overlap-text {
position: absolute;
z-index: 1;
}
.big{
  font-family: sans-serif;
  font: Helvetica;
  font-size: 80px;
  color: #fff;
  text-transform: capitalize;
}
.days{
  position: absolute;
  top: 90px;
  left: 140px;
}
.one-two:hover + .one-one{
  box-shadow: 5px 5px 8px 0 #545050;
  cursor: -webkit-grab;
}
.one-two:active{
  box-shadow: 6px 6px 4px 0 #545050;
  cursor: -webkit-grab;
}
.one-two:hover + .one-one{
  box-shadow: 5px 5px 8px 0 #545050;
  cursor: -webkit-grab;
}
.one-two:active{
  box-shadow: 6px 6px 4px 0 #545050;
  cursor: -webkit-grab;
}

<html>
<title>
100 days Challenge
</title>
<link rel="stylesheet" href="style.css">
<body>
  <div class="container">
  <nav class="header"> css challenge </nav>
  <div class="frame">
  <!-- <canvas class="canvas-frame"> -->
  <!-- <h1 class="overlap-text"> 100 </h1> -->
  <div class="one-one" id="one-one"></div>
  <div class="one-two" id="one-two"></div>
  <div class="zero-one"></div>
  <div class="zero-two"></div>
  <div class="days"><h1 class="big"> days </h1></div>

  <!-- <h2> css challenge </h2> -->
</div>
<!-- </canvas> -->
</div>
</body>
</html>

Change your HTML structure. Place `.one-two` before `.one-one` — Alex, Apr 04 '17 at 20:01
You're using the adjacent sibling selector (+), which selects the element that *follows* the hovered div. In your code, you're trying to select the element that *precedes* the hovered div. There's no selector that can accomplish that. — Rick Hitchcock, Apr 04 '17 at 20:02

score 2 · Accepted Answer · answered Apr 04 '17 at 20:03

2

Yea so you want to use the adjacent selector +

.one-one:hover + .one-two { box-shadow: 5px 5px 8px 0 #545050; }

Think you were doing it in the wrong order is all

Check out this simple codepen example: http://codepen.io/StefanBobrowski/pen/ZeZGmQ

answered Apr 04 '17 at 20:03

StefanBob

4,857
2
32
38

score 1 · Answer 2 · answered Apr 05 '17 at 05:24

Try this

<div class="container">
  <nav class="header"> css challenge </nav>
  <div class="frame">
  <!-- <canvas class="canvas-frame"> -->
  <!-- <h1 class="overlap-text"> 100 </h1> -->
  <div class="one-two" id="one-two"></div> <!-- chnage the placement of div -->
   <div class="one-one" id="one-one"></div>
  <div class="zero-one"></div>
  <div class="zero-two"></div>
  <div class="days"><h1 class="big"> days </h1></div>

  <!-- <h2> css challenge </h2> -->
</div>
<!-- </canvas> -->
</div>

CSS

.one-two:hover ~ .one-one{
  box-shadow: 5px 5px 8px 0 #545050;
  cursor: -webkit-grab;
}
.one-two:hover ~ .one-one{
  box-shadow: 5px 5px 8px 0 #545050;
  cursor: -webkit-grab;
}

jsfiddle link of your code

score 0 · Answer 3 · answered Apr 04 '17 at 20:02

What do you think about inserting little bit of jquery? lets say that div's are div #a and div #b so changing property of b by hovering a might look like this (I did not gave exact example you need but this might help you to understand how you could solve that.)

$(function() {
  $('#a').hover(function() {
    $('#b').css('background-color', 'Gray');
  }, function() {
    // on mouseout, reset the background colour
    $('#b').css('background-color', '');
  });
});

Changing property of an element on hover of another element

3 Answers3