Не работает .class:hover .class2

Question

Всегда работало, сейчас не работает.

.block1 {
  width: 100px;
  height: 100px;
  background-color: red;
}

.block2 {
  width: 100px;
  height: 100px;
  background-color: green;
}

.block1:hover .block2 {
  background-color: black;
}

<div class="block1"></div>
<div class="block2"></div>

Answer 1

Подправил CSS

.block1 {
    width: 100px;
    height: 100px;
    background-color: red;
}
.block2 {
    width: 100px;
    height: 100px;
    background-color: green;
}
.block1:hover {
    background-color: black;
}
.block2:hover{
    background-color: black;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="css.css">
    <title>Document</title>
</head>
<body>
   <div class="block1"></div>
   <div class="block2"></div>
</body>
</html>

Answer 2

Магически-телепатическая автоподстановка комбинаторов в селекторах CSS никогда не работала (и не существовала), увы.
Для того чтобы комбинатор в селекторе заработал, его обязательно нужно написать. Например, вот так:

.block1 {
  width: 100px;
  height: 100px;
  background-color: red;
}

.block2 {
  width: 100px;
  height: 100px;
  background-color: green;
}

.block1:hover ~ .block2 {
  background-color: black;
}

<div class="block1"></div>
<div class="block2"></div>

БЛОГ НА HUSL

Не работает .class:hover .class2

Ответы (2 шт):