我只想开始说我是Web开发的新手。对于HTML和CSS,我是个菜鸟。

话虽这么说:我正在建立一个个人网站,并且正在使用MaterializeCSS框架来设计网站的样式。

我的网站顶部导航栏中显示两个图标-一个“与我联系”图标和一个“继续”按钮。单击这些图标后,将出现一个难看的突出显示。



我该如何删除?我想要它,以便“垂直”矩形(从导航栏的顶部到导航栏的底部)突出显示,而不是图标上的水平突出显示。

单击图标时所需的结果:


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


我(从您发布的代码中)不知道选择器或所需的颜色是什么,但是我希望这会有所帮助。

关于html - 如何隐藏图标的突出显示?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/31142079/

10-14 17:51
查看更多