Question

我有div框。我希望当用户将鼠标悬停在它或者鼠标中心时，然后下一个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>

Answer 1

第二个元素在第一个元素上。因此，当你进入鼠标并将其淡入时，它会立即看到鼠标移动，这就是为什么它会逐渐消失。将你的第二个元素向下移动300像素，你会发现它有效。

Jenter中的Mouseenter和Mouseleave函数

1 个答案: