Блог

Главная - Вопросы по программированию - Почему эффект наведения не работает с библиотекой иконок Unicons?

Почему эффект наведения не работает с библиотекой иконок Unicons?

#html #css #hover #icons #overlay

Вопрос:

Я использую иконки с этого сайта — 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 , но все равно это не работает.

Ответ №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>

<!- Solo necesita agregar
de la pagina de ellos

» rel=»nofollow noreferrer»>https://iconscout.com/unicons/getting-started/line—>

Комментарии:

1. значки отображаются, но эффект наведения не работает, мой html-код правильный

Ответ №2:

Я не уверен, что понимаю, но мне кажется, что вы нигде не устанавливаете и :эффект наведения. Вам нужно добавить что-то вроде:

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

затем ваш значок станет красным при наведении на ссылку. Вам также необходимо добавить

 .nav_item a:hover{
  color:red;
}

чтобы ссылка также стала красной

Ответ №3:

Вы должны добавить css в селектор :перед следующим образом : .uil-18-плюс:наведите курсор:перед

Метки: