为什么悬停效果不适用于 Unicons 图标库？答案

【问题标题】：Why hover effect is not working with Unicons icon library?为什么悬停效果不适用于 Unicons 图标库？
【发布时间】：2021-08-21 06:15:51
【问题描述】：

我正在使用这个网站上的图标 - https://iconscout.com/unicons/explore/line 图标显示正确。当我应用悬停效果时，它不起作用。

我的 index.html 脚本

<header class="header" id="header">
  <nav class="nav container">
    <a href="#" class="nav__logo">LOGo</a>

    <div class="nav__menu" id="nav_menu">
      <ul class="nav__list grid">
        <li class="nav_item">
          <a href="#home" class="nav__link">
            <i class="uil uil-estate nav__icons"></i>Home
          </a>
        </li>
        <li class="nav_item">
          <a href="#about" class="nav__link">
            <i class="uil uil-user nav__icons"></i>About
          </a>
        </li>
        <li class="nav_item">
          <a href="#skills" class="nav__link">
            <i class="uil uil-file-alt nav__icons"></i>Skills
          </a>
        </li>
        <li class="nav_item">
          <a href="#services" class="nav__link">
            <i class="uil uil-briefcase-alt nav__icons"></i>Services
          </a>
        </li>
        <li class="nav_item">
          <a href="#portfolio" class="nav__link">
            <i class="uil uil-scenery nav__icons"></i>Portfolio
          </a>
        </li>
        <li class="nav_item">
          <a href="#contact" class="nav__link">
            <i class="uil uil-message nav__icons"></i>Contactme
          </a>
        </li>
      </ul>
      <i class="uil uil-times nav_close" id="nav-close"></i>
    </div>
    <div class="nav_btns">
      <div class="nav__toggle" id="nav-toggle">
        <i class="uil uil-apps"></i>
      </div>
    </div>
  </nav>
</header>

在我的 CSS 文件中，我搜索了许多建议在颜色后使用 !important 的解决方案，但仍然无法正常工作。

.nav__logo .nav__toggle {
  color: var(--title-color);
  font-weight: var(--font-medium);
}

.nav__logo:hover {
  color: var(--first-color);
}

.nav__toggle {
  font-size: 1.1rem;
  cursor: pointer;
}

.nav__toggle:hover {
  color: var(--first-color) !important;
}

@media screen and (max-width: 767px) {
  .nav__menu {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: var(--body-color);
    padding: 2rem 1.5rem 4rem;
    box-shadow: 0 -1px 4px rgba(0, 0, 0, .15);
    border-radius: 1.5rem 1.5rem 0 0;
    transition: .3s;
  }
}

.nav__list {
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.nav__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: var(--small-font-size);
  color: var(--title-color);
  font-family: var(--font-medium);
}

.nav__link:hover {
  color: var(--first-color) !important;
}

.nav__icons {
  font-size: 1.2rem;
}

.nav__icons:hover {
  color: var(--first-color) !important;
}

.nav__close {
  position: absolute;
  right: 1.3rem;
  bottom: .5rem;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--first-color);
}

.nav__close:hover {
  color: var(--first-color-alt);
}

我也用过!important，但还是不行。

【问题讨论】：

标签： html css hover icons overlay

【解决方案1】：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css">
    <title>EJemplo</title>
</head>
<body>
     
<header class="header" id="header">
    <nav class="nav container">
        <a href="#" class="nav__logo">LOGo</a>

        <div class="nav__menu" id="nav_menu">
            <ul class="nav__list grid">
                <li class="nav_item">
                    <a href="#home" class="nav__link">
                        <i class="uil uil-estate nav__icons"></i>Home
                    </a>
                </li>
                <li class="nav_item">
                    <a href="#about" class="nav__link">
                        <i class="uil uil-user nav__icons"></i>About
                    </a>
                </li>
                <li class="nav_item">
                    <a href="#skills" class="nav__link">
                        <i class="uil uil-file-alt nav__icons"></i>Skills
                    </a>
                </li>
                <li class="nav_item">
                    <a href="#services" class="nav__link">
                        <i class="uil uil-briefcase-alt nav__icons"></i>Services
                    </a>
                </li>
                <li class="nav_item">
                    <a href="#portfolio" class="nav__link">
                        <i class="uil uil-scenery nav__icons"></i>Portfolio
                    </a>
                </li>
                <li class="nav_item">
                    <a href="#contact" class="nav__link">
                        <i class="uil uil-message nav__icons"></i>Contactme
                    </a>
                </li>
            </ul>
            <i class="uil uil-times nav_close" id="nav-close"></i>
        </div>
        <div class="nav_btns">
            <div class="nav__toggle" id="nav-toggle">
                <i class="uil uil-apps"></i>
            </div>
        </div>
    </nav>
</header>
</body>
</html>

https://iconscout.com/unicons/getting-started/line-->

【讨论】：

图标正在显示，但悬停效果不起作用我的 html 是正确的

【解决方案2】：

我不确定我是否理解，但在我看来你没有在任何地方设置和 :hover 效果。您需要添加如下内容：

.nav_item a:hover i{
  color:red;
}

然后您的图标将在悬停链接时变为红色。你还需要添加

.nav_item a:hover{
  color:red;
}

让链接也变成红色

【讨论】：

【解决方案3】：

您必须在 :before 选择器中添加 css，如下所示：.uil-18-plus:hover:before

【讨论】：