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:hover .icon-edu, 
    a:active .icon-edu {
        background-image: url("./Img/Icon-edu-active.png");
    }

对于点击链接具有活动状态，最简单的方法是在生成页面的代码中向链接添加另一个类。在你的情况下，你需要使用更复杂的jQuery。

如何通过悬停或点击制作“有效”导航图标？

1 个答案: