jQuery中的Mouseenter和Mouseleave函数

Question

我有div框。 我想要当用户将鼠标悬停在它上或鼠标进入时，下一个div应该显示，当用户将鼠标移出可见的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像素，您会看到它起作用。

jQuery中的Mouseenter和Mouseleave函数

问题描述

1 个解决方案

解决方案1
3 已采纳 2012-07-16 05:34:00

jQuery中的Mouseenter和Mouseleave函数

问题描述

1 个解决方案

解决方案1 3 已采纳 2012-07-16 05:34:00

解决方案1
3 已采纳 2012-07-16 05:34:00