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;
}

悬停时jQuery div叠加

3 个答案: