#menuleaf:hover, #menuleaf:focus {
filter:invert(100%);
}
<img id="menuleaf" src="https://image.flaticon.com/icons/svg/411/411289.svg" height=13px" />
到底是什么问题?我能找到的所有教程似乎都应该像这样简单?
最佳答案
错别字:
: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
属性缺少开头的 "
。
关于html - 为什么这个用于在悬停时反转颜色的 CSS 不能在我的图像上工作?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56122069/