#id in css is not working while element#\#id works why? and also general css doesn't affect el-CodePudding

#hex{ } is not working ( have tried edge, chrome, opera works nowhere) while img#/#hex{}(which i found from chrome developer tools works everywhere)

here 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 my css code that doesn't work even if i 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 my css code that works partially: as hover dosen't work on img#\#hex However, I do not know how img#\#hex works or why does it work.

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;
}

img 1 what is when it is not hoveredenter image description here

img 2 when hovered on first img enter image description here

img 3 when hovered over second img enter image description here

have I made some mistake somewhere or is there some problem in my code here or anything of that sort? please tell me. thank you in advance!

i was expecting :hover to

work with img#\#hex

and give a transparent background while hovering!

CodePudding user response：

# in css is a selector for ID, to fix your code change the id of the image to hex.

And make the proper changes to fix your css selectors

<img id="hex" src="https://emojipedia-us.s3.dualstack.us-west-amazonaws.com/thumbs/120/apple/325/broccoli_1f966.png" alt="broccoli-img">

Also consider removing the img selector, as the id should be unique you do not need the img part.

#hex {
    background-color: rgba(238, 255, 0, 0.445) ;
    border-radius: 10px;
}