jQuery div overlay on hover

Question

Here is a simplified example of what it is. Все, что я хочу, это сделать один серый div на своем паре. Однако все становится серым. И я не понимаю, почему.

код ниже:

<style> 
#myclient > li{ 
    display: inline-block; 
    width:140px; 
    margin-right:10px; 
} 
#myclient > li a{ 
    border: 1px solid red; 
    display: block; 
    height: 222px; 
    position: relative; 
} 
#myclient > li img{ 
    max-height: 100px; 
    max-width: 100px; 
    vertical-align: middle; 
    position: absolute; 
    margin: auto; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
} 
.myhover{ 
    background-color: rgba(50,50,50,1); 
    position: absolute; 
    height: 100%; 
    width: 100%; 
    overflow: hidden; 
    top: 0; 
    left: 0; 
    display: none; 
} 
</style> 
<ul id="myclient"> 
    <li><a href="#">1</a> 
     <div class="myhover" style="display: none; opacity: 1;"> 
     </div> 
    </li> 
    <li><a href="#">2</a> 
     <div class="myhover" style="display: none; opacity: 1;"> 
     </div> 
    </li> 
    <li><a href="#">3</a> 
     <div class="myhover" style="display: none; opacity: 1;"> 
     </div> 
    </li> 
    <li><a href="#">4</a> 
     <div class="myhover" style="display: none; opacity: 1;"> 
     </div> 
    </li> 
    <li><a href="#">5</a> 
     <div class="myhover" style="display: none; opacity: 1;"> 
     </div> 
    </li> 
</ul> 
<script> 
$(document).ready(function(){ 
    $("#myclient").on("mouseenter", "li", function(){      
     $(this).find('.myhover').fadeIn(400); 
    }).on("mouseleave", "li", function(){ 
     $(this).find('.myhover').stop().fadeOut(100); 
    }) 
}); 
</script> 

Answer 1

Поскольку накладываемого абсолютно против всего тела. Сделать это по отношению к родителю <li>:

#myclient > li { 
    position: relative; 

    /* ... */ 
} 

DEMO:http://jsfiddle.net/bGa34/1/

Answer 2

Попробуйте

#myclient > li{ 
    display: inline-block; 
    width:140px; 
    margin-right:10px; 
    position:relative 
} 

DEMO

Answer 3

Попробуйте этот код:

Fiddle

#myclient > li{ 
    display: inline-block; 
    width:140px; 
    margin-right:10px; 
    position: relative; 
}