0

Bom dia, pessoal. Estou com o seguinte código HTML:

    <li>
        <a href="../navbar/" class="navbar-top user-color">
        <span class="glyphicon glyphicon-user gly-user" aria-hidden="true"></span> ENTRAR</a>
   </li>

E o seguinte código CSS:

.gly-user {
    border: 2px solid rgb(35, 220, 97);
    padding: 0.6em;
    border-radius: 25px;
    margin-right: 8px;
    color: #23DC61;
}

Como eu faço, para que ao passar o mouse em cima do "link" entrar, tanto a cor do ícone como sua borda fique verde e ao mesmo tempo a palavra entrar também fique verde. Além disso, como fazer para ao retirar o mouse, os dois voltem para o "estado normal" (inicial), o ícone com a cor e a borda branca e o texto com a cor branca?

Obrigado!

1 Resposta 1

2

Você pode usar funções como li:hover .gly-user {} e li:hover a {}, dessa forma, quando o li sofrer o hover irá modificar a classe escolhida.

Veja este exemplo:

/* SOMENTE PARA DEMOSTRAÇÃO */

html, body, li {
  background: #222;
  margin:0px;
  padding:0px;
}

.menu {
  width:200px;
  float:left;
}

.menu li {
  width:200px;
  height:auto;
  padding:10px;
  border: 2px dashed rgb(0, 0, 0);
}

/* QUANDO ACIONADO */
/* Apenas acrescente as "variaveis" que são modificadas, não há necessidade de declarar novamente o que já contem no PADRAO */

.menu li:hover a {
  color: #23DC61;
}

.menu li:hover .gly-user {
  border: 2px solid rgb(35, 220, 97);
}

/* PADRAO */

.menu li a {
  color: #fff;
  text-decoration: none;
}

.menu li .gly-user {
  border: 2px solid rgb(255, 255, 255);
  padding: 0.6em;
  border-radius: 25px;
  margin-right: 8px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<div class="menu">

  <li>

    <a href="../navbar/" class="navbar-top user-color">
      <span class="glyphicon glyphicon-user gly-user" aria-hidden="true"></span> ENTRAR
    </a>

  </li>

</div>

A classe .menu foi criada apenas para que o li:hover não alteresse em todos os locais, sendo assim, apenas os elementos dentro dele serão afetados.

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 .