Design comparison
Solution retrospective
Can someone please help me with these: 1.For some reason I'm not able to make my button's background transparent so for some internal peace swapped it with opacity property. 2. Rounded Borders(border- radius) when the page size is reduced.
Any suggestions/guidance/pressing concerns are welcome !! XD Peace!
Community feedback
- @MaritxxPosted over 2 years ago
Hey!
You set the background-color and color on your buttons by including the ID of your div (#cardtwo button). You then tried changing them by selecting just the button element (button:hover). ID's are more specific than elements, so you were unable to change the background-color and color (it was overridden by the color/background color you had set on the #cardtwo button). Opacity worked, because you had not set that property before, so it did take effect.
For the :hover effect to work in this code, you'll have to target #cardtwo button:hover. You can also change your styling to just target 'button' instead of '#cardtwo button', your button:hover will then also work.
It might help you to look into CSS selectors to learn more about this. ^^
Marked as helpful0
Please log in to post a comment
Log in with GitHub
Join 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