Допустим я имею 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.
Спасибо