当视口大于992px时，我想在以下两个实例中的菜单元素下显示一条灰线：
这是我的代码：
总体造型
/* Nav bar */
.active {
border-bottom: 1px solid #3a3a3a;
}`
媒体查询
/* Media Query: laptops and desktops (992px and up) */
@media screen and (min-width: 992px) {
#menu a:hover {
border-bottom: 1px solid #3a3a3a;
}
}
任何帮助将不胜感激。预先感谢！
我对 CSS 和 Web 开发总体来说还很陌生，所以我尝试删除一般样式以查看媒体查询是否能按预期工作。它做了。我还尝试在总体样式中添加“活动”选择器，但这不起作用。除了这两件事之外，我不完全确定如何解决问题，因此我的问题。
您可以从此 MDN 文档 阅读如何将悬停与媒体查询一起使用。
这是如何在媒体查询中使用悬停的示例。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Hover Example</title>
<style>
@media screen and (min-width: 992px) and (hover: hover) {
a:hover {
border-bottom: 1px solid #3a3a3a;
}
}
</style>
</head>
<body>
<a href="#">Try hovering over me!</a>
</body>
</html>