Question

我只是想开始说我是网络开发的新手;对于HTML和CSS，我是一个菜鸟。

话虽如此：我正在建立一个个人网站，我正在利用MaterializeCSS框架来设计网站的样式。

我的网站顶部导航栏中有两个图标 - 与我联系图标和恢复按钮。单击这些图标后，会出现一个难看的亮点。

enter image description here

如何删除此内容？我想要它，所以“垂直”矩形（从导航栏顶部到导航栏底部）突出显示 - 而不是图标上的水平突出显示。

点击图标时所需的结果： enter image description here

以下是相关的HTML：

<body>
    <header>
        <nav class="top-nav">
            <div class="nav-wrapper yellow lighten-2">
                <a href="#" class="page-title" style="color: #212121">Work Experience</a>
                <ul class="right">
                    <li>
                        <a href="#" class="waves-effect">
                            <i class="mdi-communication-message"></i>
                        </a>
                    </li>
                </ul>
            </div>
        </nav>
    </header>
</body>

Answer 1

将以下选择器添加到css文件中以覆盖元素的悬停属性。

<resume-selector>:hover,
<contact-me-selector>:hover {
    background-color:  <color-of-vertical-highlight>
}

我不知道（根据您发布的代码）选择器或所需颜色是什么，但我希望这会有所帮助。

Answer 2

解决方案非常简单。

创建名为＆＃34; li-no-hover＆＃34;

的通用类实现

设置背景属性：悬停选择器。

HTML代码：

<nav>
    <div class="nav-wrapper deep-orange accent-4">
        <a href="" class="brand-logo">Logo</a>
        <ul 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>
            <li class="li-no-hover"><a><span class="btn">Login / SignUp</span></a></li>
        </ul>
    </div>
</nav>

CSS代码：

nav .nav-wrapper ul li.li-no-hover:hover {
  background-color: transparent; }

注意：如果您想要反过来，只需将无悬停从<li>移至<span>。

如何抑制图标的突出显示？

2 个答案: