0

我有 div 框。我希望当用户将其悬停或 mouseenter 时，下一个 div 应该显示，当用户 mouseout 时，可见 div 应该淡出。我的功能无法正常工作。

<head>    
<script type="text/javascript" src="jquery-1.7.2.js"></script>    
<script type="text/javascript">  

$(function (){      

    $('.box').bind({            
        mouseenter: function (){                
            $(this).next().fadeIn('fast')               
        },          
        mouseout: function (){
            $(this).next().fadeOut('fast')                  
        }


        })      
    })    
</script>    

<style>

body { margin:0}
.box { height:300px; width:300px; background:#F00}

.boxcaption { width:300px; height:300px; background:#00F; position:absolute; left:0; top:0; display:none}
</style>
</head>

<body>

<div class="wrap">

<div class="box"></div>
<div class="boxcaption"></div>

</div>
</body>
4

1 回答 1

3

第二个元素在第一个元素之上。因此，当您进入鼠标然后它淡入时，它会立即看到鼠标退出，这就是它淡入的原因。将您的第二个元素向下移动 300 像素，您会发现它有效。

于 2012-07-16T05:34:00.860 回答