css - 如何将 :hover 与 :not() 结合使用?
问题描述
我正在尝试为没有“is-current”类的元素创建悬停效果,但不知何故,以下 SCSS 无法按预期工作:
.class {
&:not(.is-current):hover {
color: #fff;
}
&.is-current {
color: #000;
}
}
我无法弄清楚为什么生成的 css 是这样的:
class::active, class::focus, class::hover {
background: #fff;
}
我已经尝试过&:not(".is-current")
了,但结果是一样的。
有人知道如何实现这一目标吗?
提前致谢!
解决方案
以下对我来说很正常,
.some {
&.is-current { color: blue }
&:not(.is-current):hover { color: red }
}
输出是
.some.is-current {
color: blue;
}
.some:not(.is-current):hover {
color: red;
}
就像您期望的那样,效果很好:
.some.is-current { color: blue }
.some:not(.is-current):hover { color: red }
<span class="some">One</span> · <span class="some is-current">One</span>
也许您的问题还有其他问题。
推荐阅读
- html - 如果按钮在组件 A 中且元素在组件 B 中,则单击时显示元素
- javascript - 在 React 中添加 onClick 到提交按钮
- python - 带有 MySQL 8 服务器的 MySQL 实用程序
- iphone - 如果用户名和密码都为空,如何显示警报消息
- c# - 执行登录按钮时 ASP.NET 上的 CS 1061 错误
- sql-server - 数据库恢复模型更新
- html - 如何创建一个只是轮廓的盒子阴影?
- oracle - Oracle Peoplesoft 和 SQL 开发人员
- xamarin.ios - 我正在尝试与 WKWebView 中的现有用户代理一起发送自定义字符串, - Xamarin iOS
- css - Bootstrap 4链接悬停下划线