Question 392305 in CSS Question posted in
Some basic documentation can be found here.

CSS: suppress hover effect for dissociate <label> and <input>

In below example, CSS "helpfully" triggers input:hover when the label is hovered. How can this label hover effect be suppressed with only changing the CSS, so that the input border only changes when it is hovered itself? pointer-events: none is not an option.

input:hover {
  border: 1px solid red;
}
<div><label for="foo">label</label></div>
<div><input id="foo"/></div>
Tags:

2

Answers


  1. 0

    A bit hacky but it works.

    div:has(label:hover) + div input {
  border: revert;
}

input:hover {
  border: 1px solid red;
}
    <div><label for="foo">label</label></div>
<div><input id="foo"/></div>
    Login or Signup to reply.
  2. 0

    When an element is hovered, then so are its ancestor elements. But this doesn’t apply to the :hover matched by the labelled control. So we can test the parent element of the input to see if it’s also hovered. Like this:

    input:hover:is(:hover > :hover) {
  border: 1px solid red;
}
    <div><label for="foo">label</label></div>
<div><input id="foo"/></div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search