Reputation:
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
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
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