Изменение цвета при наведении на иконку?

Рейтинг: -1Ответов: 3Опубликовано: 28.07.2023

Все вставил, но результата ноль

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=Righteous&family=Urbanist:wght@500;600&display=swap');
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  color: #FFFFFF;
  font: 500 16px/28px 'Urbanist', Arial, Helvetica, sans-serif;
  background-color: #14110E;
}

a {
  color: inherit;
  text-decoration: none;
  transition: .4s;
}

ul li,
ol li {
  list-style-type: none;
}

img {
  max-width: 100%;
  max-height: 100%;
}

button {
  display: block;
  border: none;
  color: inherit;
  font: inherit;
  background-color: transparent;
  transition: 4s;
  cursor: pointer;
}

.container {
  max-width: 1340px;
  margin: 0 auto;
  padding: 0 75px;
}

.container-header {
  padding: 0 10px;
}


/* Header */

#header-section {
  padding: 32px 0;
  background-color: #1C1814;
}

.header,
.nav-main,
.nav-main_list,
.header-action {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-main {
  flex-grow: 1;
}

.nav-main_list {
  gap: 48px;
  font: 400 18px 'Inter', Arial, Helvetica, sans-serif;
}

.nav-main_link_selected {
  color: #C99E71;
  font-weight: 700;
  cursor: default;
}

.nav-main_link:hover,
.header-action_search:hover,
.header-action_cart:hover {
  color: #C99E71;
}

.header-action {
  gap: 50px;
  margin-left: 48px;
}

.header-action_search,
.header-action_cart {
  font-size: 30px;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Coffeee shop</title>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Icons+Outlined">
  <link rel="stylesheet" href="css/style.css">
</head>

<body>
  <header id="header-section">
    <div class="container container-header">
      <div class="header">
        <nav class="nav-main">
          <ul class="nav-main_list">
            <li class="nav-main_item">
              <a class="nav-main_link nav-main_link_selected" href="#">Home</a>
            </li>
            <li class="nav-main_item">
              <a class="nav-main_link" href="#">About</a>
            </li>
            <li class="nav-main_item">
              <a class="nav-main_link" href="#">Menu</a>
            </li>
            <li class="nav-main_item">
              <a class="nav-main_link" href="#">Reservation</a>
            </li>
          </ul>

          <ul class="nav-main_list">
            <li class="nav-main_item">
              <a class="nav-main_link" href="#">Pages</a>
            </li>
            <li class="nav-main_item">
              <a class="nav-main_link" href="#">Shop</a>
            </li>
            <li class="nav-main_item">
              <a class="nav-main_link" href="#">Contact</a>
            </li>
          </ul>

        </nav>
        <div class="header-action">
          <button class="header-action_search material-icons-outlined">search</button>
          <button class="header-action_cart material-icons-outlined">local_mall</button>
        </div>

      </div>

    </div>
  </header>

</body>

</html>

css html
Источник: Stack Overflow на русском

Ответы

▲ 1

Изменение цвета происходит, но медленнее чем на блоках с текстом, измените у button свойство transition:

   button {
     transition: .4s;
   }
▲ 0

там задержка стояла у вас, и цвет менялся через 4 секунды /*transition: 4s;*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=Righteous&family=Urbanist:wght@500;600&display=swap');
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  color: #FFFFFF;
  font: 500 16px/28px 'Urbanist', Arial, Helvetica, sans-serif;
  background-color: #14110E;
}

a {
  color: inherit;
  text-decoration: none;
  transition: .4s;
}

ul li,
ol li {
  list-style-type: none;
}

img {
  max-width: 100%;
  max-height: 100%;
}

button {
  display: block;
  border: none;
  color: inherit;
  font: inherit;
  background-color: transparent;
  /*убрала*/
  /*transition: 4s;*/
  cursor: pointer;
}

.container {
  max-width: 1340px;
  margin: 0 auto;
  padding: 0 75px;
}

.container-header {
  padding: 0 10px;
}


/* Header */

#header-section {
  padding: 32px 0;
  background-color: #1C1814;
}

.header,
.nav-main,
.nav-main_list,
.header-action {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-main {
  flex-grow: 1;
}

.nav-main_list {
  gap: 48px;
  font: 400 18px 'Inter', Arial, Helvetica, sans-serif;
}

.nav-main_link_selected {
  color: #C99E71;
  font-weight: 700;
  cursor: default;
}

.nav-main_link:hover,
.header-action_search:hover,
.header-action_cart:hover {
  color: #C99E71;
}

.header-action {
  gap: 50px;
  margin-left: 48px;
}

.header-action_search,
.header-action_cart {
  font-size: 30px;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Coffeee shop</title>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Icons+Outlined">
  <link rel="stylesheet" href="css/style.css">
</head>

<body>
  <header id="header-section">
    <div class="container container-header">
      <div class="header">
        <nav class="nav-main">
          <ul class="nav-main_list">
            <li class="nav-main_item">
              <a class="nav-main_link nav-main_link_selected" href="#">Home</a>
            </li>
            <li class="nav-main_item">
              <a class="nav-main_link" href="#">About</a>
            </li>
            <li class="nav-main_item">
              <a class="nav-main_link" href="#">Menu</a>
            </li>
            <li class="nav-main_item">
              <a class="nav-main_link" href="#">Reservation</a>
            </li>
          </ul>

          <ul class="nav-main_list">
            <li class="nav-main_item">
              <a class="nav-main_link" href="#">Pages</a>
            </li>
            <li class="nav-main_item">
              <a class="nav-main_link" href="#">Shop</a>
            </li>
            <li class="nav-main_item">
              <a class="nav-main_link" href="#">Contact</a>
            </li>
          </ul>
        </nav>
        <div class="header-action">
          <button class="header-action_search material-icons-outlined">search</button>
          <button class="header-action_cart material-icons-outlined">local_mall</button>
        </div>
      </div>
    </div>
  </header>
</body>

</html>

▲ -2

я сам конечно учусь. но я заметил что у тебя проблема в подгружаемом стиле.

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Icons+Outlined">

т.е. если убрать класс material-icons-outlined то фон меняется