-4

cada item da minha lista possui um icon na frente, mas, o hover não funciona para os dois ao mesmo tempo. quando passo o mouse no icon o 'texto' acompanha o efeito do hover, mas quando passo no 'texto' o icon não acompanha o efeito. o que pode estar causando isso e como posso resolver?

.nav-container {
  max-width: 1200px;
  width: 100%;
  position: relative;
  top: 5px;
}

.nav-container ul {
  float: right;
  height: 100px;
  line-height: 100px;
  margin: 0;
}

.nav-container li {
  list-style: none;
  float: left;
  padding-left: 10px;
  margin-right: 100px;
  margin-left: 30px;
  position: relative;
}

.nav-container li a {
  text-decoration: none;
  color: #111;
  transition: .2s;
}

.nav-container li a:hover {
  color: #0068AF
}
<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<nav class="nav-container">
  <ul>
    <li><a href="#"><i class="fa fa-user fa-lg" aria-hidden="true"></i> texto </a></li>
    <li><a href="#"><i class="fa fa-shopping-basket fa-lg" aria-hidden="true"></i> texto </a></li>
  </ul>

1
  • 2
    Veja o exemplo na própria pergunta. O problema relatado não ocorre. 22/07/2021 às 18:08

1 Resposta 1

-2

Pode ser alguma coisa no resto dos seus estilos que está passando por cima desse, porque só nesse pedaço de código está funcionando da maneira que você quer

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .