Hover effect on element is not working in CSS

Question

I am trying to change the color of box2 when I hover over box1 but its not working. please help me why this is not working.

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.box1,
.box2 {
  width: 100px;
  height: 100px;
}

.box1 {
  background-color: teal;
  /*   position:relative; */
}

.box2 {
  background-color: tomato;
  position: relative;
  left: -50px;
}

.box1:hover .box2 {
  background-color: green;
}

<div class="box1"></div>
<div class="box2"></div>

score 4 · Answer 1 · answered Oct 03 '20 at 10:02

.box1:hover .box2 indicates the .box2 selector which is included in .box1 when hovered. So there is no selector for that.

In your case, you should use .box1:hover ~ .box2 which indicates the .box2 selector next to .box1 selector.

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.box1, .box2{
  width: 100px;
  height: 100px;
}
.box1 {
  background-color: teal;
/*   position:relative; */
}
.box2 {
  background-color: tomato;
  position: relative;
  left: -50px;
}

.box1:hover ~ .box2{
  background-color: green;
}

<div class="box1"></div>
<div class="box2"></div>

score 3 · Answer 2 · answered Oct 03 '20 at 10:02

You need to use the + selector to access a sibling. Your code was looking for box2 as a child element

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.box1,
.box2 {
  width: 100px;
  height: 100px;
}

.box1 {
  background-color: teal;
  /*   position:relative; */
}

.box2 {
  background-color: tomato;
  position: relative;
  left: -50px;
}

.box1:hover + .box2 {
  background-color: green;
}

<div class="box1"></div>
<div class="box2"></div>

score 1 · Answer 3 · answered Oct 03 '20 at 10:03

1

You just have to add ~ after hover

.box1:hover ~ .box2 {
        background-color: green;
      }

answered Oct 03 '20 at 10:03

Ghayas Ud Din

315
2
14

score 1 · Accepted Answer · answered Oct 03 '20 at 10:05

.box1:hover .box2 targets all elements within box1 when it is hovered over.

However, you'd like to make it so it targets elements next to box1. So you can use the + symbol instead!

The + symbol targets the element after the first element.

So please change it to .box1:hover + box2

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.box1,
.box2 {
  width: 100px;
  height: 100px;
}

.box1 {
  background-color: teal;
  /*   position:relative; */
}

.box2 {
  background-color: tomato;
  position: relative;
  left: -50px;
}

.box1:hover + .box2 {
  background-color: green;
}

<div class="box1"></div>
<div class="box2"></div>

Hover effect on element is not working in CSS

4 Answers4