Basically I have
.parent {
height:200px;
}
.title {
user-select: none;
}
.parent:hover {
background:green;
}<div class="parent">
<div class="title">
Hello World!
</div>
<input type="text" placeholder="Hello Input!">
</div>and I would like the hover effect to be disabled when hovering the input.
How can I do this?
One improvement would be to automatically disable the hover effect when cursor change to text or cursor.
>Solution :
You could use :not(:has(input:hover)) for a CSS-only solution, but please note that :has() is not supported universally in all browsers yet.
.parent {
height:200px;
}
.title {
user-select: none;
}
.parent:hover:not(:has(input:hover)) {
background:green;
}<div class="parent">
<div class="title">
Hello World!
</div>
<input type="text" placeholder="Hello Input!">
</div>Otherwise, you could listen in JavaScript for whether the input is hovered:
const input = document.querySelector('input');
input.addEventListener('mouseenter', ({ target }) => {
target.closest('.parent').classList.add('foo');
});
input.addEventListener('mouseleave', ({ target }) => {
target.closest('.parent').classList.remove('foo');
});.parent {
height:200px;
}
.title {
user-select: none;
}
.parent:hover:not(.foo) {
background:green;
}<div class="parent">
<div class="title">
Hello World!
</div>
<input type="text" placeholder="Hello Input!">
</div>