Why isn't #hex{ } working properly across different browsers (I've tested in Edge, Chrome, and Opera but it's not working)? On the other hand, img#/#hex{} (which I discovered using Chrome Developer Tools) works perfectly everywhere.
Below is my HTML code:
<img src="https://emojipedia-us.s3.amazonaws.com/thumbs/240/apple/118/bacon_1f953.png" alt="bacon-img">
<img id="#hex" src="https://emojipedia-us.s3.dualstack.us-west-amazonaws.com/thumbs/120/apple/325/broccoli_1f966.png" alt="broccoli-img">
Here is the CSS code that isn't working, even when I've tried img#hex or simply #hex:
img{
background-color: rgba(0, 255, 0, 0.445);
border-radius: 20px;
}
img:hover{
background-color: transparent;
border-radius: 25px;
#hex{
background-color: rgba(255, 0, 0, 0.445) ;
border-radius: 10px;
}
Here is the CSS code that partially works, as the hover effect doesn't work on img#\#hex. I'm unsure how img#\#hex functions or why it works:
img{
background-color: rgba(0, 255, 0, 0.445);
border-radius: 20px;
}
img:hover{
background-color: transparent;
border-radius: 25px;
img#\#hex {
background-color: rgba(238, 255, 0, 0.445) ;
border-radius: 10px;
}
Image 1 before hovering: enter image description here
Image 2 when hovering over the first image: enter image description here
Image 3 when hovering over the second image: enter image description here
Did I make a mistake somewhere in my code or is there an issue with my code? Any feedback would be appreciated. Thank you in advance!
I expected :hover to work with img#\#hex and provide a transparent background upon hovering!