如何阻止框架在悬停时改变元素的颜色？

Question

我使用 materializecss 制作网站。我正在尝试制作类似于他们 website.

上使用的侧边导航

我想在 Side Nav 中将选定的选项卡涂成红色，但由于 materializecss 本身，当我将鼠标悬停在它上面时它会一直变成灰色。

有时阻止框架做我不希望它们做的事情的好方法是什么？

谢谢。

编辑 - 我的代码 https://jsfiddle.net/9mek1r48/

     <ul id="slide-out" class="side-nav fixed">
            <li class="activeTab"><a href="#!" class="white-text">+Add Banner</a>            
            </li>
            <li><a href="#!">Test</a>            
            </li>
     </ul>

以及我创造的风格

.activeTab {
    background-color: #ee6e73;
    !important;
}

Answer 1

我通常做的是在我的 css 文件的顶部，在框架 css 文件之后，添加 css 规则来覆盖框架中的规则而不编辑框架本身。

您想将此添加到您的 css:

ul.side-nav.fixed li:hover, ul.side-nav.fixed li.active {
   background-color: rgba(0, 0, 0, 0.05);
}

根据您的喜好更改颜色。

编辑：停止更改试试这个：

ul.side-nav.fixed li:hover, ul.side-nav.fixed li.active {
  background-color: inherit;
}

如何阻止框架在悬停时改变元素的颜色？

How stop framework from changing color of elements on hover?

html

css

jquery

frameworks

materialize