CODEWITHSUNDEEP
cssreactjs
user11206142
user11206142

Reputation:

Change background colour in React on hover

I would like to change the background colour of my component when I hover over anywhere that section. With what I have here, the background changes only at the line where I hover. Whereas I need the entire section to change its background no matter where I hover over it. How could I achieve this?

function ModifySection(e) {
        e.target.style.background = Colors.background.underground // corresponds to "#FAF8F9"
        e.target.style.padding = Metrics.spacing.inside // corresponds to 8
    }

function BasicSection(e) {
        e.target.style.background = Colors.background.ground // corresponds to "#FFFF"
    }

    const [hover, setHover] = useState(false)

    return (
        <Column of="group" onMouseEnter={ModifySection} onMouseLeave={BasicSection}>
            <Heading level={3}>{category}</Heading>
            <Column of="group">
                <Row>
                    <Text secondary style={{ flex: 5 }}>
                        {t("workpieceSheet:creation.date")}
                    </Text>
                    <Text normal style={{ flex: 9 }}>
                        {creationDate}
                    </Text>
                </Row>
            </Column>
        </Column>
    )

Upvotes: 0

Views: 4656

Answers (2)

windmaomao
windmaomao

Reputation: 7680

I never need to access the element directly. But the problem is that you didn't give the component a chance to refresh. onMouseEnter is good to capture the event.

    const [hover, setHover] = useState(false)

    const onMouseEnter = e => {
      setHover(true)
    }

Once the event is captured, the above will set hover state and thus trigger a refresh of your component.

Now you can use this hover to change your look, ex. via a className.

  <Row className={hover ? "active" : ""}>

And now if your css defined active for the Row, it'll apply the css change accordingly.


> Understanding react is to learn how to use `prop` or `state`, which will trigger render once the change is detected.

Upvotes: 0

Benjamin
Benjamin

Reputation: 3656

Instead of modifying the dom nodes of the elements that were hovered (thats your issue), you can use the hover state to create a style prop.

const [hover, setHover] = useState(false)

const sectionStyle = {
  background: hover ? Colors.background.underground : Colors.background.ground,
  padding: hover ? Metrics.spacing.inside : undefined,
};

return (
  <Column style={sectionStyle} of="group" onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}>
      <Heading level={3}>{category}</Heading>
      <Column of="group">
          <Row>
              <Text secondary style={{ flex: 5 }}>
                  {t("workpieceSheet:creation.date")}
              </Text>
              <Text normal style={{ flex: 9 }}>
                  {creationDate}
              </Text>
          </Row>
      </Column>
  </Column>
)

Upvotes: 2

Related Questions