эффект hover который задействует другой элемент

Question

Нужно сделать так что бы при наведении мышкой на собаку - заблюрилась кошка, а при кошке - заблюрилась собака,подскажите пожалуйста как реализовать?

.images{
  width:200px;
  height:200px;
  background-color:blue;
  float:left;
  background-image: url("https://townofbeekmantown.com/wp-content/uploads/2019/06/2-dog.jpg");
  background-size: cover;
}

#cat{
  float:right;
  background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg");
  background-size: cover;
}

#dog:hover{
  filter: blur(4px)
}

#cat:hover{
  filter: blur(4px)
}


#block{
  width:500px;
  margin:0 auto;
}

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title></title>
</head>
<body>
  <div id="block">
    <div class="images" id="dog"></div>
    <div class="images" id="cat"></div>
  </div>
</body>
</html>

Answer 1

Можно использовать вот такую запись:

#block:hover .images:not(:hover) {}

.images {
  width: 200px;
  height: 200px;
  background-color: blue;
  float: left;
  background-image: url("//i.imgur.com/piJfel6.jpg");
  background-size: cover;
}

#cat {
  float: right;
  background-image: url("//i.imgur.com/5gGW43t.jpg");
  background-size: cover;
}

#block {
  width: 500px;
  margin: 0 auto;
}

#block:hover .images:not(:hover) {
  filter: blur(4px);
}

<div id="block">
  <div class="images" id="dog"></div>
  <div class="images" id="cat"></div>
</div>

БЛОГ НА HUSL

эффект hover который задействует другой элемент

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