Question

I m 创建一个新的“LayeredButton”部分,其中一个纽托邦是另一个州前的,而背后的纽托邦基本上透明,并且更是两个州背后。基本如此:

确切地看一下我是如何想到的。然而,我的问题在于,在我凌驾于<条码>、Button<>/代码>时,它触发了<条码>。 Behind Button s hover as well,因为我们在技术上也 h在后面的纽特。

(见我的改动,但已超过<条码>。

我的以下基本组成部分:

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>
  );

因此,我基本上想要忽视父母的四分之四。 Front Button s hover isactive.

注:<代码>Button部分也放在屋内,因此,如果需要,我可以推断出该代码,但时间相当长,而且大概是用大量毛换声明,因此我在这里胜过。

Answer 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;
  }

* <<>::has pseudo-class没有在>说明中得到充分支持。

这样做的另一个方式是保持 h风格,但将背后纽托的颜色改变为原始背景颜色,只要前纽顿被 h。

  .hover:hover {
    background: lightblue;
  }
  #front-button:hover + #behind-button {
    background: navy;
  }

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>
)

友情链接