CSS媒体查询不显示所需的输出

tp5buhyn 于 4个月前发布在其他

关注(0)|答案(1)|浏览(73)

当viewport大于992px时，我想在以下两个示例中的菜单元素下显示一条灰色线：
1.当一个页面正在积极访问，我希望行留在原地
1.当一个页面没有被积极访问，我希望这一行出现在悬停
下面是我的代码（按照Code Institute的指示）：

一般造型

/* 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;
    }
}

型

编辑：:hover选择器正常工作，但在主动访问每个页面时，该行不会停留在原位。

我对CSS和Web开发总体来说是个新手，所以我尝试删除通用样式，看看媒体查询是否能像预期的那样工作。它做到了。我还尝试在通用样式中添加:active选择器，但那不起作用。除了这两件事，我不完全确定如何解决这个问题，因此我提出了我的问题。
谢谢你，谢谢

css

来源：https://stackoverflow.com/questions/77722221/css-media-query-not-displaying-desired-output

1条答案

按热度按时间

b5buobof1#

您可以阅读如何在MDN docs（CCS4约定）中使用悬停和媒体查询。
下面是一个如何在媒体查询中使用hover的例子。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>News</title>
    <style>
      @media screen and (min-width: 992px) and (hover: hover) {
        #menu a:hover {
          border-bottom: 1px solid #3a3a3a;
        }
      }
    </style>
  </head>
  <body>
    <div id="menu">
      <a href="#">Try hovering over me! I get underline on Hover</a>
    </div>
    <div>
      <a href="#">Hovering over me doesn't apply style</a>
    </div>
  </body>
</html>

字符串
至于你的案例（基于你在评论中链接的代码）：
1.如果你想“主动访问”。你必须根据需要使用:active选择器或:visited选择器。
目前你的代码有一个class="visited"应用到你所有的链接，这给你的内容.visited永久。如果你使用选择器，你会得到想要的输出。
我认为你想在链接之间切换，并根据所选内容显示下面的页面。我建议你使用任何脚本语言来实现这一点。因为这会更容易。参考一些navbar代码，因为你是新的。
1.由于.visited与hover有相同的代码，因此您无法看到hover上的任何更改。如果您注解.visited或将其更改为适当的选择器。它将为您工作。

赞(0）回复(0）举报 4个月前

我来回答

CSS媒体查询不显示所需的输出

1条答案

相关问题

热门标签

最新问答