Как изменить цвет значка при наведении курсора на тег <a>

Question

Пока я наводил курсор на область тега <a>, я хочу изменить цвет значка, но по какой-то причине он остается прежним. Я смог получить желаемый результат только в том случае, если я точно определил значок .sidebar .menu li a .icon:hover{background: #ecedf2;color: #3d5654;}, но мне нужно было навести курсор мыши точно на значок. Я хотел изменить цвет значка при наведении курсора на область тега. Сообщите мне, если я что-то делаю не так.

HTML

<div class="sidebar">
  <ul class="menu">
    <li>
      <a href="#"
        ><span class="icon"><i class="fas fa-desktop"></i></span
        ><span class="text">Dashboard</span></a
      >
    </li>
  </ul>
</div>

CSS

* {
  list-style: none;
  text-decoration: none;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Jost', sans-serif;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  height: 100vh;
  width: 100wh;
  padding: 0;
  margin: 0;
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.6;
  display: grid;
  grid-template-columns: auto 8fr;
  grid-template-rows: 80px auto 50px;
  grid-template-areas:
    'header header'
    'sidebar main'
    'footer footer';
}

.sidebar {
  grid-area: sidebar;
  width: 260px;
  background: #2c343b;
  height: 100%;
}

.sidebar .menu {
  padding-right: 30px;
  padding-left: 20px;
  margin: 0;
  overflow: auto;
  transition: all 0.5s;
}

.sidebar .menu li a {
  color: #ecedf2;
  display: block;
  width: 100%;
  line-height: 60px;
  text-decoration: none;
  padding: 15px;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 1px;
  transition: 0.5s;
}


.sidebar .menu li a .icon {
  color: #ecedf2;
  width: 25px;
  display: inline-block;
}

.sidebar .menu li a:hover,
.sidebar .menu li a.active {
  background: #ecedf2;
  color: #3d5654;
}

Answer 1

Вы можете достичь с помощью этого кода

.sidebar .menu a:hover i{
        background: #ecedf2;
        color: #3d5654;
}

Answer 2

Может вам это поможет. Я просто добавляю селектор CSS для значка.

.sidebar .menu li a:hover i{
   color:red;
}

Answer 3

попробуйте вместо этого:

.sidebar .menu li a .icon i:hover {
     color:red;
}

Answer 4

Вы можете добиться этого с помощью синтаксиса: hover (это псевдокласс)

a:hover { color : value }

// a - это элемент, к которому вы хотите применить наведение // // проверка документации mdn, псевдокласс //

Answer 5

• Попробуйте это ..

* {
  list-style: none;
  text-decoration: none;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Jost', sans-serif;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  height: 100vh;
  width: 100wh;
  padding: 0;
  margin: 0;
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.6;
  display: grid;
  grid-template-columns: auto 8fr;
  grid-template-rows: 80px auto 50px;
  grid-template-areas:
    'header header'
    'sidebar main'
    'footer footer';
}

.sidebar {
  grid-area: sidebar;
  width: 260px;
  background: #2c343b;
  height: 100%;
}

.sidebar .menu {
  padding-right: 30px;
  padding-left: 20px;
  margin: 0;
  overflow: auto;
  transition: all 0.5s;
}

.sidebar .menu li a {
  color: #ecedf2;
  display: block;
  width: 100%;
  line-height: 60px;
  text-decoration: none;
  padding: 15px;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 1px;
  transition: 0.5s;
}


.sidebar .menu li a .icon {
  color: #ecedf2;
  width: 25px;
  display: inline-block;
}

.sidebar .menu li a:hover,
.sidebar .menu li a.active {
  background: #ecedf2;
  color: #3d5654;
}

<div class="sidebar">
  <ul class="menu">
    <li>
      <a href="#"
        ><span class="icon"><i class="fas fa-desktop"></i></span
        ><span class="text">Dashboard</span></a
      >
    </li>
  </ul>
</div>