Question

我想使用MaterialiseCSS将导航栏中的悬停bg颜色更改为另一个颜色，默认效果只是使突出显示更暗，我需要将该突出显示更改为另一种颜色，如白色。

当导航栏颜色为黑色时，没有高光或悬停效果。

我可以改变导航栏颜色的bg，文字颜色但我不能改变背景高亮颜色，有什么想法吗？

提前谢谢

<!DOCTYPE html>
<html>

<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.2/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.2/js/materialize.min.js"></script>

<style>    
nav ul li a{
  color: orange;
}    
</style>
</head>

<body>
<header class="top-nav">

<div class="navbar-fixed">
  <nav>
    <div class="nav-wrapper black blue-text">
      <a href="#!" class="brand-logo center">Logo</a>
      <ul class="left hide-on-med-and-down">
        <li><a href="sass.html">Sass</a></li>
        <li><a href="badges.html">Components</a></li>
        <li class="active"><a href="collapsible.html">JavaScript</a></li>
      </ul>
    </div>
  </nav>
</div>

</header>
<main></main>
<footer></footer>
</body>
</html>

In Jsbin here :)

Answer 1

只需将此规则添加到您的css：

nav ul li:hover {
   background-color: white;
}

它会在悬停时更改项目的背景颜色。在此示例中：http://jsbin.com/yemegejeye/edit?html,output它是白色的。

Answer 2

只需在 CSS 文件中添加这些行

.btn:hover, .btn-large:hover, .btn-small:hover {
    background-color: #6c3af5;
}

这将改变悬停时的按钮颜色

无法使用Materialise CSS在导航栏中更改突出显示悬停颜色

2 个答案: