How to do Hover to link and icon at the same time

Question

Good morning, everyone. I have the following HTML code:

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

And the following CSS code:

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

As I do, so that when passing the mouse over the "link" enter, both the color of the icon and its border turn green and at the same time the word enter also turn green. Also, how to do to when removing the mouse, both go back to the "normal state" (initial), the icon with the color and white border and the text with the white color?

Thank you!

Answer 1

You can use functions such as li:hover .gly-user {} and li:hover a {}, thus, when the li suffer the hover will modify the chosen class.

Take this example:

/* 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>

The class .menu was created only so that the li:hover does not change in all locations, so only the elements within it will be affected.