Question

我有<div>设置：

#menu_one
{
    height:50px;
    width:150px;
    background-color:#666666;
}
</style>

<div id="menu_one"></div>

我想要做的是让这个<div>淡入一个图像，该图像在鼠标上具有相同的大小，然后在鼠标退出时淡出。

有两个图像之间的灰色背景图像会更好吗？

我将如何做到这一点？

Answer 1

您可以使用绝对定位和z-index：

<style>
#menu_one
{
    position: absolute;
    top: 0px;
    height:50px;
    width:150px;
    background-color:#666666;
    z-index: 0;
}
#imgDiv
{
    position: absolute;
    top: 0px;
    height:50px;
    width:150px;
    z-index: -1;
}
</style>

<script>
$(function(){
    $("#menu_one").mouseover(function() {
        $("#menu_one").fadeOut();
    });
    $("#imgDiv").mouseout(function() {
        $("#menu_one").fadeIn();
    });    
});
</script>

<div id="menu_one"></div>
<div id="imgDiv"><img src="image.png"/>

Answer 2

您可以在某处创建隐藏的图像。当用户将鼠标悬停在div上时，您将图像放在它上面并将其淡入。

翻译jQuery代码中的上一句话留给读者练习：）

在jquery中从div淡出到图像

2 个答案: