How to Hover to Link and Icon at the Same Time

Navigation
0

Good day, people. 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 by hovering over the link, both the color of the icon and its border turn green and at the same time the word enter also turns green. Also, how do you remove the mouse, the two go back to the "normal state" (initial), the icon with the color and the white border and the text with the color white?

Thank you!

    
asked by anonymous 14.02.2016 / 16:54

1 answer

2

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

See 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 li:hover did not change in all places, so only the elements within it would be affected.

    
14.02.2016 / 19:20
Non-angular dynamic variable Date Timer [duplicate]