Html 如何抑制图标'；什么是亮点？_Html_Css_Materialize

Html 如何抑制图标'；什么是亮点？

html css

Html 如何抑制图标'；什么是亮点？,html,css,materialize,Html,Css,Materialize,我只是想开始说我是网络开发新手；说到HTML和CSS，我是个笨蛋话虽如此：我正在建立一个个人网站，我正在利用这个框架来设计网站我的网站顶部导航栏中有两个图标，一个是“联系我”图标，另一个是“简历”按钮。单击这些图标后，会出现一个不好看的突出显示我如何删除这个？我想让“垂直”矩形（从导航栏顶部到导航栏底部）高亮显示，而不是图标上的水平高亮显示单击图标时所需的结果：以下是相关的HTML： <body> <header> <nav c

我只是想开始说我是网络开发新手；说到HTML和CSS，我是个笨蛋

话虽如此：我正在建立一个个人网站，我正在利用这个框架来设计网站

我的网站顶部导航栏中有两个图标，一个是“联系我”图标，另一个是“简历”按钮。单击这些图标后，会出现一个不好看的突出显示

我如何删除这个？我想让“垂直”矩形（从导航栏顶部到导航栏底部）高亮显示，而不是图标上的水平高亮显示

单击图标时所需的结果：

以下是相关的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>

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

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

：悬停，
：悬停{
背景色：
}

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

解决方案非常简单

创建名为“li no hover”的泛型类实现

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

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>

注意：如果您想让它反过来，只需将禁止悬停从

移动到

我使用它时没有突出显示。你能做一个演示吗@ManojKumar我似乎无法用我所有的CSS复制它。不确定这里发生了什么。可能是浏览器应用的：焦点样式。对于那些可能通过键盘导航的用户来说，这实际上是一个可用性和可访问性功能。您可以删除它，但我建议您不要这样做。@ManojKumar，这个问题并不存在——而且，单击它看起来更漂亮。

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