@MahdiAljazairi
Posted
@steeven509 Now have I figured out why this isn't working! And tbh, it's kinda embarassing π
The :hover
pseudo-class must be put after .card__img
, not ::before
! Just like this:
.card__img:hover::before { ... }
Why? Because, according to the spec, pseudo-elements (like ::before
) can't have pseudo-classes (like :hover
). So you have to apply :hover
to an actual element (like .card__img
) for it to work.
For that reason, the selectors in main.scss
should be arranged like this:
.card {
...
&__img {
...
&::before {
...
}
&:hover::before {
...
}
}
/* rest of the selectors.. */
}
Marked as helpful
@steeven509
Posted
@MahdiAljazairi Thank you so much π i have a question πββοΈ whatβs editor βοΈ you use for write βοΈ like that for write the feedback like that
@MahdiAljazairi
Posted
@steeven509 No need for an editor to write feedback π
If you mean code blocks, these are made via Markdown. Place three backticks (```) by themselves on a line, followed by a new line, followed by anything you want to write (Not necessarily code), then another three backticks on another seperate line. This creates a code block.
For more stuff check out the option named Markdown Help whenever you write feedback or replies on Frontend Mentor.
Marked as helpful
@steeven509
Posted
@MahdiAljazairi Oh thank you bro