悬停时jQuery div叠加

Question

这是一个简单的例子.我想要的只是在悬停时制作一个灰色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;

    /* ... */
}

演示: http ://jsfiddle.net/bGa34/1/