CODEWITHSUNDEEP
htmlcss
lehtia
lehtia

Reputation: 23

Why won't this CSS for inverting colours on hover work on my image?

#menuleaf:hover, #menuleaf:focus　{
  filter:invert(100%);
 }
<img id="menuleaf" src="https://image.flaticon.com/icons/svg/411/411289.svg" height=13px" />

What is the problem exactly? All the tutorials I can find make it seem like it should be as easy as this?

Upvotes: 0

Views: 51

Answers (2)

Kaiido
Kaiido

Reputation: 136756

Typo:

You have an invalid white-space character between :focus and {: 

const str= `#imgname:hover, #imgname:focus　{`;
console.log(str.split('focus')[1].charCodeAt(0)); // space is 32

Fixing this typo will make your rule work:

#imgname:hover, #imgname:focus {
  filter:invert(100%);
}
<img id="imgname" src="https://upload.wikimedia.org/wikipedia/commons/f/fd/Ghostscript_Tiger.svg" height="13px" />

And also note that while it's not the issue here, your height attribute misses an opening ".

Upvotes: 1

Hari Krishnan K R
Hari Krishnan K R

Reputation: 93

Your image source doesn't look like it would load correctly. Give the correct location of the image inside src.

then invert the image

#imgname:hover,#imgname:focus {
  -webkit-filter: invert(100%);
          filter: invert(100%);
}

Upvotes: 0

Related Questions