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

Question

#menuleaf:hover, #menuleaf:focus　{
  filter:invert(100%);
 }

<img id="menuleaf" src="https://image.flaticon.com/icons/svg/411/411289.svg" height=13px" />

到底是什么问题？我能找到的所有教程看起来都应该像这样简单吗？

Answer 1

错别字：

您在:focus和{之间有无效的空格字符：

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

修正此错字将使您的规则生效：

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

<img id="imgname" src="https://upload.wikimedia.org/wikipedia/commons/f/fd/Ghostscript_Tiger.svg" height="13px" />

还要注意，虽然这不是问题所在，但您的height属性缺少开头"。

Answer 2

您的图像源看起来好像无法正确加载。在src中指定图像的正确位置。

然后反转图像

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