Срабатывание :hover у родителя в любом месте кроме .особенного-блока

Question

Допустим я имею 2 блока с такой структурой

#parent {
  height: 60px;
  width: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #222125;
}

#parent:hover {
  background-color: red;
}

#children {
  height: 50px;
  width: 200px;
  background-color: #00f;
  color: white;
}

<div id="parent">
  <div id="children">Нужно, наведя сюда, вернуть фон у #parent</div>
</div>

И нужно сделать так, чтобы при наведении на #parent менялся его фон, но после того как навёл на #children фон возвращался.

Нужно сделать так что бы свойство :hover у #parent сработало, когда курсор находится на #parent везде, но если курсор находится на #children то отменить это свойство.

На JS такое можно сделать, мне интересно возможно ли такое без js.

Спасибо

Answer 1

Можно Вот такое извращение реализовать...

#parent {
  height: 60px;
  width: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #222125;
}

#parent:hover {
  background-color: red;
}

#children {
  position: relative;
  height: 60px;
  width: 200px;
  background-color: #00f;
  color: white;
}

#children:before,
#children:after {
  position: absolute;
  content: '';
  left: -50px;
  background-color: transparent;
  height: 60px;
  width: 50px;
  pointer-events: none;
}

#children:after {
  left: auto;
  right: -50px;
  top: 0;
}

#children:hover#children:before {
  background-color: #222125;
}

#children:hover#children:after {
  background-color: #222125;
}

<div id="parent">
  <div id="children">Нужно, наведя сюда, вернуть фон у #parent</div>
</div>

БЛОГ НА HUSL

Срабатывание :hover у родителя в любом месте кроме .особенного-блока

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