Question 214978 in Html Question posted in
Some basic documentation can be found here.

Html – While hovering over one element, disable hover on another

I’m creating a new "LayeredButton" component where one button is kind of in front of the other, and the button behind is essentially transparent, and is more-so the div behind both buttons. Basically like so:

enter image description here

Looks exactly how I want it– yay! However, my problem comes from the hovering behaviour– right now when I hover over the Front Button, it triggers the Behind Button‘s hover as well, since we are technically hovering over the behind button too.

enter image description here

(You can’t see my mouse but it is over Front Button)

Here is my essentially my component:

return (
    <div className="bg-primary-bold hover:bg-primary-light-500 rounded-full active:bg-primary-bold-600">
      <Button
        id="left-button"
        buttonStyle="primary"
        fill="outline"
        spacing="hug"
        onClick={leftOnClick}
      >
        {leftLabel}
      </Button>
      <Button
        id="right-button"
        buttonStyle="transparent"
        fill="link"
        spacing="hug"
        onClick={rightOnClick}
      >
        {rightLabel}
      </Button>
    </div>
  );

So basically I want that parent div hover to be ignored if Front Button‘s hover is active.

Note: The Button component is also in house so I can edit that code if need be, but it is pretty long and ugly with lots of gross switch statements so I won’t bore you with it here.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    For anyone curious, I figured out a solution that was basically what kayla1424 posted, but flipped:

    const [addHoverClass, setAddHoverClass] = useState(true);
const hoverClassName = addHoverClass ? "hover:bg-primary-light-500" : "";

const handleMouseOver = () => {
  setAddHoverClass(false);
};
const handleMouseLeave = () => {
  setAddHoverClass(true);
};

return (
    <div
      className={`bg-primary-bold ${hoverClassName} rounded-full active:bg-primary-bold-600`}
    >
      <Button
        id="left-button"
        buttonStyle="primary"
        fill="outline"
        spacing="hug"
        onClick={leftOnClick}
        onMouseOver={handleMouseOver}
        onMouseLeave={handleMouseLeave}
      >
        {leftLabel}
      </Button>
      <Button
        id="right-button"
        buttonStyle="transparent"
        fill="link"
        spacing="hug"
        onClick={rightOnClick}
      >
        {rightLabel}
      </Button>
    </div>
  );

  2. 0
    1. A very simple way to do it is to use CSS to only add the hover style when the front button is not being hovered.
      .hover:not(:has(#front-button:hover)):hover {
    background: lightblue;
  }

    *Note: the :has pseudo-class is not fully supported in Firefox yet.

    Another way to do it is to keep the hover style but change the background color of the behind button to its initial background color whenever the front button is hovered.

      .hover:hover {
    background: lightblue;
  }
  #front-button:hover + #behind-button {
    background: navy;
  }
    1. You could also do this in JavaScript by creating a variable to decide when to add the hover class based on whether you are hovering over the front button or the behind button.
    const [addHoverClass, setAddHoverClass] = useState(false);

return (
  <div className={`${addHoverClass ? "hover" : ""} other-class`}
    onMouseOver={(event) => {
      if (event.target.id === "front-button") setAddHoverClass(false);
      else setAddHoverClass(true);
    }}
   >
     <Button id="front-button">Front Button</Button>
     <Button id="behind-button">Behind Button</Button>
   </div>
)
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search