html - 为什么这个用于在悬停时反转颜色的 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 属性缺少开头的 "。