您的位置：首页 > Web前端 > JQuery

#学习笔记#(6)mouseenter-mouseleave显示隐藏内容-jQuery

2015-12-08 09:39 676 查看 
<pre name="code" class="html"><html>
<head>
<title>mouseenter-mouseleave显示隐藏内容-jQuery</title>
<style type="text/css">
label
{
background-color:green;
color:white;
font-size:22px;
}
.div
{
display:none;
}
</style>
<script type="text/javascript" src="jquery-1.11.3.min.js">
</script>
</head>
<body>
<label id="label1">标签1</label>
<label id="label2">标签2</label></br>
<p>注：鼠标移动到标签上显示对应内容</p>
<div id="div1" class="div">
<p>这是标题1的内容</p>
</div>
<div id="div2" class="div">
<p>这是标题2的内容</p>
</div>
<script>
$(document).ready(function(){
$("#label1").mouseenter(function(){$("#div1").css('display','block');});//鼠标移进标签1显示div1的内容
$("#label2").mouseenter(function(){$("#div2").css('display','block');});//鼠标移进标签2显示div2的内容
$("#label1").mouseleave(function(){$("#div1").css('display','none');});//鼠标移出标签1隐藏div1的内容
$("#label2").mouseleave(function(){$("#div2").css('display','none');});//鼠标移出标签2隐藏div2的内容
}
);
</script>
</body>
</html>



                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航