为什么在悬停时反转颜色的CSS不能在我的图片上使用？

Question

 #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?

Answer 1

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 " .

Answer 2

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