Design comparison
Solution retrospective
I would like to know if there is any another way to make the hover styles on the main image link other than using pseudo-elements.
.card .link-main-image{
display: flex;
position: relative;
}
.card .link-main-image::before{
content: '';
display: none;
background-color: var(--cyan);
border-radius: 10px;
opacity: 40%;
position: absolute;
width: 100%;
height: 100%;
}
.card .link-main-image::after{
content: '';
display: none;
background: url('../images/icon-view.svg') no-repeat center;
position: absolute;
width: 100%;
height: 100%;
}
.card .link-main-image:hover::before,
.card .link-main-image:hover::after{
display: block;
}
Community feedback
- @R3ygoskiPosted 5 months ago
Hello Carolina, congratulations on completing your project! It turned out very well.
Regarding your question, yes, you can simulate the
:hover
effect without using pseudo-elements or pseudo-classes, but I must warn you that it’s not a practical approach. You could do something like this in a JavaScript file, for example:block.addEventListener('mouseover', () => { block.style.display = 'block' }) block.addEventListener('mouseout', () => { block.style.display = 'none' })
However, this may add an extra layer of complexity to your project. Personally, I recommend sticking to the use of the
hover
pseudo-element.And again, congrats, if you have any further questions or doubts, feel free to ask, and I’ll do my best to assist!
Marked as helpful1@CarolinaCiolinPosted 5 months agoHey, thank you very much for your comment :)
I'll be learning JavaScript soon, so I'll come back to this project to try it out the way you suggested.
1
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord