Не работает hover с разными параметрами одновременно к 5 элементам?

Рейтинг: 0Ответов: 1Опубликовано: 28.06.2023

.main:hover {
      background: white;
      color:  #A1BAD8;
}
.main:hover .circle:hover  {
   background:  #A1BAD8;
}
.main:hover h3:hover {
  color:  white;
}
.main:hover p:hover,
.main:hover h2:hover, 
.main:hover .read:hover {
  color:  #A1BAD8;
}
  <div class="main"> 
    <div class="a"></div>
    <div class="circle"> <h3> A. </h3> </div>
    <h2> Money Saving Ideas</h2>
    <p> Praesent vestibulum<br> aenean nonummy hendrerit mauris. Curn sociis natoque penatibus et magnis dis.</p>
    <p> <a href="#" class="read"> read more </a> </p>
    </div>

hover
Источник: Stack Overflow на русском

Ответы

▲ 1

Всё работает. Вы так хотели?

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <title>hover</title>
  <style type="text/css">
    .main:hover {
      background-color: white;
      color:  #A1BAD8;
    }
    .main:hover a {
      background-color: white;
      color:  #A1BAD8;
    }
  </style>
</head>
<body>
  <div class="main"> 
    <div class="a"></div>
    <div class="circle"> <h3> A. </h3> </div>
    <h2> Money Saving Ideas</h2>
    <p> Praesent vestibulum<br> aenean nonummy hendrerit mauris. Curn sociis natoque penatibus et magnis dis.</p>
    <p> <a href="#" class="read"> read more </a> </p>
    </div>
</body>
</html>