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

【问题标题】：How stop framework from changing color of elements on hover?如何阻止框架在悬停时改变元素的颜色？
【发布时间】：2015-08-10 15:40:11
【问题描述】：

我使用materializecss制作网站。我正在尝试制作一个类似于在他们的website 上使用的侧导航。

我想在我的侧边导航中将选定的选项卡涂成红色，但是由于 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;
}

【问题讨论】：

听起来像是一个 CSS 问题——您可能需要使您的选择器更具体地针对您所定位的元素。在没有看到您的任何代码的情况下，这几乎是任何人都可以得到的帮助。
我不熟悉materializecss，但是使用Bootstrap，您必须在加载css之前覆盖变量。在您的情况下，您可能必须做同样的事情或用您自己的样式覆盖该类。
为了清晰起见，我添加了代码。您可能需要将页面区域扩大一点才能看到导航。

标签： jquery html css frameworks materialize

【解决方案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;
}

【讨论】：

问题是当我将鼠标悬停在它上面时我不想“li”改变颜色。
它只是改变 Nav 的颜色，而不是 li 的颜色。但我找到了一种让它发挥作用的方法。我将 li 关闭到一个背景颜色与 li 相同的 div 中。