移除物化CSS链接上的悬停效应

Question

我正在使用物化CSS导航栏组件。每个链接都有一个悬停效果，在链接周围创建一个可见的框。我正试着摆脱这个动画。到目前为止，我一直试图压倒一切，但没有取得任何成功。有人知道如何消除这种悬停/活动效果吗？

Answer 1

在css源代码中可以看到：

nav ul a:hover {
   background-color: rgba(0, 0, 0, 0.1) !important;
}

因此，您需要在css中添加：

nav ul a:hover {
    background-color: rgba(0, 0, 0, 0) !important;
}

​

nav ul a:hover {
    background-color: rgba(0, 0, 0, 0) !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

<nav>
    <div class="nav-wrapper">
        <a href="#" class="brand-logo">Logo</a>
        <ul id="nav-mobile" class="right hide-on-med-and-down">
            <li><a href="sass.html">Sass</a></li>
            <li><a href="badges.html">Components</a></li>
            <li><a href="collapsible.html">JavaScript</a></li>
        </ul>
    </div>
</nav>

​

Answer 2

我使用的是反应物化，我通过以下方式实现了它：

<Button style={{backgroundColor: '#1E282B', color: 'white'}} />

颜色属性将悬停效果限制在所需的颜色上，而不是消失并获得相同的背景色。