hover property doesn't work at div elements

Question

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

/* Circle */

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

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;
  cursor: pointer;
}

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

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

div.red:hover ~ div.bg {
  background-color: red;
}
div.green:hover ~ div.bg {
  background-color: rgb(5, 105, 5);
}

div.blue:hover ~ div.bg {
  background-color: rgb(0, 32, 175);
}

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

div.red:hover ~ div.bg p.red {
  opacity: 1;
}

div.green:hover ~ div.bg p.green {
  opacity: 1;
}

div.blue:hover ~ div.bg p.blue {
  opacity: 1;
}

<!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">Czerwony</p>
      <p class="green">Zielony</p>
      <p class="blue">Niebieski</p>
      <p class="orange">Pomarańczowy</p>
    </div>
  </body>
</html>

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

Edit: I added opacity to .bg p elements and when I hover it doesn't change, 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>

score 3 · Accepted Answer · answered Aug 22 '22 at 17:38

Use the general sibling combinator ~ selector:

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

For a detailed explanation of what it is, see What does the "~" (tilde/squiggle/twiddle) CSS selector mean?

See in use below:

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

Andy Hoffman · Answer 2 · 2022-08-22T17:45:24.570

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>

hover property doesn't work at div elements

2 Answers2