css - 如何通过悬停或单击制作 'active' 导航图标？

Question

<div class="nav">
<div class="container">
<ul>
    <li><a href="#"><i class="icon-info"></i></a></li>
    <li><a href="#"><i class="icon-edu"></i></a></li>
    <li><a href="#"><i class="icon-employment"></i></a></li>
    <li><a href="#"><i class="icon-skills"></i></a></li>
    <li><a href="#"><i class="icon-photo"></i></a></li>
    <li><a href="#"><i class="icon-personality"></i></a></li>
</ul>
</div>
</div>

我想制作一个具有事件和非事件模式的图像导航栏。将鼠标悬停或单击时，事件模式会打开。所以我在上面创建了基本的导航列表，然后在下面添加了一些 CSS 代码。我已经到了浏览器默认显示所有未激活图标的地步。 我想制作一个单页网站，所以这里的所有导航图标都将链接到页面中的某个位置(我也在想办法)。

.icon-edu {background-image: url("./Img/Icon-edu.png");
background-repeat: no-repeat;
}
.icon-edu: hover, 
.icon-edu: active {
background-image: url("./Img/Icon-edu-active.png");
}

所以问题是，当我将鼠标悬停在图标上时，或者当它们处于事件状态时，我无法获得事件图标。我不确定我还需要做什么？ 我是最菜鸟的新手，我从 Codecademy 开始，然后继续制作网站。请对我放轻松:D

Answer 1

首先你需要在你的 i 标签中有一些文本，否则它的宽度将为 0px 并且你将看不到任何东西(对于图标你可能想要一个具有固定尺寸的 div，但那是另一个问题)我使用了背景颜色和一些虚拟文本以使其正常工作。

您的选择器也没有连接到您的 a 标签。所以这会起作用。

    a:hover .icon-edu, 
    a:active .icon-edu {
        background-image: url("./Img/Icon-edu-active.png");
    }

要使单击的链接处于事件状态，最简单的方法是在生成页面的代码中向链接添加另一个类。在您的情况下，您需要使用稍微复杂一点的 jQuery。