时间戳

首页 > 解决方案 > 在小视口中更改导航栏链接的悬停颜色（在汉堡包下）

html - 在小视口中更改导航栏链接的悬停颜色（在汉堡包下）

问题描述

我正在尝试使用 Bootstrap 4.2.1 自定义导航栏。我已经设法自定义了所有内容，除了出现在汉堡菜单下（在一个小视口上）的HOVER链接文本的颜色。在更宽的视口中，下面的 CSS 可以指定链接的悬停颜色。我缺少什么能够更改小视口上的悬停链接文本？

.navbar-custom .nav-item:focus .nav-link,
.navbar-custom .dropdown-item:hover, 
.navbar-custom .dropdown-item:focus {
        color: #000; }

标签： htmlcsstwitter-bootstrapnavbar

解决方案

使用@media查询语法：

@media screen and (max-width: 600px) {
    .navbar-custom .nav-item:focus .nav-link,
    .navbar-custom .dropdown-item:hover, 
    .navbar-custom .dropdown-item:focus {
            color: #000; }
}

查看MDN了解更多信息

推荐阅读