HOVER effect on a <li> and the components within it

Question

Good morning, everyone!

I have <li> in my project, I would like very much to use an image on the right side of my <li>, did so:

<ul>
    <li id="sair">Sair<div class="icons"></div></li>
</ul>

My CSS:

.icons{
    width: 15px;
    height: 14px;
    background-position: 0px 0px;
    position: absolute;
    margin-top: -16px;
    margin-left: 815px;
    z-index: 5;
    background-image: url("logout-px.png");
}

.icons:hover{
    width: 15px;
    height: 14px;
    background-position: 14px 0px;
    background-color: red !important;
    background-image: url("logout-px.png");
}

#sair:hover
{
    color: white;
    background-color: red !important;
    border-bottom-color: #a20000;
    border-left-color: #a20000;
    border-right-color: #ff6363;
    border-top-color: #ff6363;
    border-width: 3px;
    cursor: pointer;
}

Imagery:

Without :hover:

Hover with mouse on <li>:

Hover with mouse on <div>:

Wanted something that just by passing the mouse on <li> Hover took them all, even in the <div>, thank you!

Answer 1

Place the image directly in li, it is much easier:

HTML:

<ul>
    <li id="sair">Sair</li>
</ul>

CSS:

#sair {
    display:inline-block;
    width: 50px;
    padding: 2px;
    background: transparent url("logout-px.png") no-repeat right center;
}
#sair:hover {
    background-color: red;
}

Jsfiddle

Answer 2

So that all the <li> have the same effect you should apply a selector from the tag itself as follows:

li:hover {
// código CSS
}

Instead of:

#sair:hover {
// código CSS
}

And let the elements in the <li> inherited from their father, that is, from <li>, for example: when the effect :hover occur in the father (<li>) the child elements will also inherit the same properties. For example:

HTML

<ul id="menu">
    <li id="sair">Sair<div class="icons">aasas</div></li>
    <!-- outros <li> -->
</ul>

CSS

#menu li:hover {
    color: white;
    background-color: red !important;
     // outras propriedades
}

.icons {
     background-color: inherit; // Aqui está herdando a propriedade do <li> que é o pai, nesse caso, o background do ícone também vai ficar vermelho
     // outras propriedades
}

Doing so, you can even discard the selector .icons:hover for this menu.

Answer 3

If you want to change the behavior when there is hover in li, of the child element, which in its case is div classy .icons, you can do:

#sair:hover .icons {
   ...
}

Take an example:

ul{
    list-style:none;
    padding:5px;
}
ul li {
    width:60px;
    padding:2px;
}
.icons{
    vertical-align:middle;
    width: 16px;
    height: 16px;
    display:inline-block;  
    background-image: url("http://png-4.findicons.com/files/icons/2354/dusseldorf/16/logout.png");
    margin-left: 2px;
}

#sair:hover
{
    color: white;
    background-color: red !important;
    border-bottom-color: #a20000;
    border-left-color: #a20000;
    border-right-color: #ff6363;
    border-top-color: #ff6363;
    border-width: 3px;
    cursor: pointer;
}
#sair:hover .icons {
     /*Altera a imagem de background*/
     background-image: url("http://png-4.findicons.com/files/icons/2146/realistik_reloaded/16/exit.png");
}

<ul>
    <li id="sair">
      Sair
      <div class="icons"></div>
    </li>
</ul>

You can also use CSS icons for this purpose, for example Font Awesome, see an example:

ul{
    list-style:none;
    padding:5px;
}
ul li {
    width:40px;
    padding:2px;
    font-size:14px;
}
ul li:hover{
    cursor:pointer;
    background-color:red;
    color:white;
}

<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" />
<ul>
    <li id="sair">Sair <i class="fa fa-power-off"></i></li>
</ul>