HOVER effect on a li and the components inside it

Question

HOVER effect on a li and the components inside it

Navigation

#1 by (3 votes)
#2 by (2 votes)
#3 by (0 votes)

3

Good morning everyone!

I have <li> in my project, I would very much like to use an image on the right side of EXIT of my <li> , I 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;
}

Images:

Without :hover :

Hoverwithmouseon<li>:

Hover with mouse on <div> :

I wanted something that, just passing the mouse on <li> done HOVER caught on everyone, even on <div> , thanks!

html css

asked by anonymous 19.08.2014 / 14:26

3 answers

Interpreting an algorithm Run script in a div

score 3 · Answer 1

Place the image directly in li, it's 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

score 2 · Answer 2

In order for all <li> to have the same effect you must apply a selector of the tag itself as follows:

li:hover {
// código CSS
}

Instead of:

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

And let elements inside <li> inherit from parent, ie <li> , for example: when :hover occurs in parent ( <li> ) 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
}

In doing so, you can even drop the .icons:hover selector for this menu.

score 0 · Answer 3

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

#sair:hover .icons {
   ...
}

See 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, such as 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>