why my Button hover function isn't working? - css

Question

Hi guys so I'm trying to use react-bootstrap to create my app and I want my button to change style when hovered on. I already make the css but it won't work, it didn't change when I hover the button. I tried to inspect the element but there's nothing wrong with it. anyone know why it happens ?
Here's my code:
.facsButton:hover{
font-size: 40px;
font-weight: 600;
color: #10255A;
}
<Container fluid>
<Row className="facsbuttwrapper text-center">
<Col sm={4} lg={4}>
<Button
value="1"
variant="custom"
className="facsButton"
style={{
fontSize: "32px",
fontWeight: "500",
color: "#10255A",
}}
onClick={(e) => setCurrentId(e.target.value)}
>
De'Spa
</Button>
</Col>
<Col sm={4} lg={4} className="RestoButton">
<Button
value="2"
variant="custom"
className="facsButton"
style={{
fontSize: "32px",
fontWeight: "500",
color: "#10255A",
}}
onClick={(e) => setCurrentId(e.target.value)}
>
De'Resto
</Button>
</Col>
<Col sm={4} lg={4}>
<Button
value="3"
variant="custom"
className="facsButton"
style={{
fontSize: "32px",
fontWeight: "500",
color: "#10255A",
}}
onClick={(e) => setCurrentId(e.target.value)}
>
Meeting Room
</Button>
</Col>
</Row>
</Container>

Answer 1

Rules from stylesheets have a lower priority than rules in an inline style declaration from a style attribute:
Inline styles added to an element (e.g., style="font-weight: bold;") always overwrite any styles in external stylesheets, and thus can be thought of as having the highest specificity.
You should use a stylesheet for both (and remove the inline style declaration):
.facsButton{
font-size: 32px;
font-weight: 500;
color: #10255A;
}
.facsButton:hover{
font-size: 40px;
font-weight: 600;
color: #10255A;
}
Alternatively you can use !important but that's an anti-pattern:
When an important rule is used on a style declaration, this declaration overrides any other declarations. Although technically !important has nothing to do with specificity, it interacts directly with it. Using !important, however, is bad practice and should be avoided because it makes debugging more difficult by breaking the natural cascading in your stylesheets.
[...]
How !important can be used:
A) Overriding inline styles
Your global CSS file that sets visual aspects of your site globally may be overwritten by inline styles defined directly on individual elements. Both inline styles and !important are considered very bad practice, but sometimes you need the latter to override the former.
In this case, you could set certain styles in your global CSS file as !important, thus overriding inline styles set directly on elements.
.facsButton:hover{
font-size: 40px !important;
font-weight: 600 !important;
color: #10255A !important;
}
(Side note: color: #10255A; seems to be the same for both states, so it wouldn't have to be specified in the hover state at all.)