hover property doesn't work at div elements

August 22, 2022

I have a small project related to changing colors druging hovering on circle elements. I would like to change background color of div.bg element and show some text at the same time. So I came up with idea to use like this:

div.red:hover div.bg {
  background-color: red;
}

But it doesn’t work at all, why?

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Circle */

div.red {
  background-color: #f00;
  top: 20px;
  left: 20px;
  transition: 0.3s;
}

div.green {
  background-color: rgb(44, 150, 2);
  top: 20px;
  right: 20px;
}

div.blue {
  background-color: #020496;
  bottom: 20px;
  left: 20px;
}

div.orange {
  background-color: #f09308;
  bottom: 20px;
  right: 20px;
}

div.circle {
  position: fixed;
  height: 34px;
  width: 34px;
  border-radius: 180%;
  border: 2px solid white;
}

/* Background */
div.bg {
  height: 100vh;
  background-color: #ddd;
}

.bg p {
  text-align: center;
  line-height: 100vh;
  font-size: 50px;
  font-weight: arial;
  color: white;
}

p.red,
p.green,
p.blue,
p.orange {
  display: none;
}

div.red:hover div.bg {
  background-color: red;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Zadanie 1 - zmiana koloru po najechaniu</title>
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <div class="red circle"></div>
    <div class="green circle"></div>
    <div class="blue circle"></div>
    <div class="orange circle"></div>
    <div class="bg">
      <p class="red">Red</p>
      <p class="green">green</p>
      <p class="blue">blue</p>
      <p class="orange">orange</p>
    </div>
  </body>
</html>

>Solution :

div.red:hover div.bg {
  background-color: red;
}

This code would only work as intended if .bg was a child of .red, i.e.

<div class="red circle">
  <div class="bg"></div>
</div>

I added the tilde character (general sibling combinator) which means to match the second expression if it comes after the first, but only if both elements share the same parent.

div.red:hover ~ div.bg {
  background-color: red;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


/* Circle */

div.red {
  background-color: #f00;
  top: 20px;
  left: 20px;
  transition: 0.3s;
}

div.green {
  background-color: rgb(44, 150, 2);
  top: 20px;
  right: 20px;
}

div.blue {
  background-color: #020496;
  bottom: 20px;
  left: 20px;
}

div.orange {
  background-color: #f09308;
  bottom: 20px;
  right: 20px;
}

div.circle {
  position: fixed;
  height: 34px;
  width: 34px;
  border-radius: 180%;
  border: 2px solid white;
}


/* Background */

div.bg {
  height: 100vh;
  background-color: #ddd;
}

.bg p {
  text-align: center;
  line-height: 100vh;
  font-size: 50px;
  font-weight: arial;
  color: white;
}

p.red,
p.green,
p.blue,
p.orange {
  display: none;
}

div.red:hover~div.bg {
  background-color: red;
}

<div class="red circle"></div>
<div class="green circle"></div>
<div class="blue circle"></div>
<div class="orange circle"></div>
<div class="bg">
  <p class="red">Red</p>
  <p class="green">green</p>
  <p class="blue">blue</p>
  <p class="orange">orange</p>
</div>