jQuery实现鼠标移入移出事件切换功能示例

@H_404_0@这篇文章主要介绍了jQuery实现鼠标移入移出事件切换功能,结合实例形式分析了jQuery不同版本处理鼠标事件响应与触发相关操作技巧,需要的朋友可以参考下。

jQuery实现鼠标移入移出事件切换功能

@H_404_0@分享给大家供大家参考，具体如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
<Meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
<title>jQuery事件-div的显示隐藏及鼠标的移入移出</title>  
<style>  
.header{  
    width:302px;  
    height:40px;  
    background:green;  
    font-size:20px;  
    margin-bottom: 0px;  
}  
.content{  
    width:300px;  
    border:1px solid #333;  
    background:#CCC;  
    display: none;  
    margin-top:0px;  
}  
</style>  
</head>  
<script type="text/javascript" src="jquery-1.11.1.js"></script>  
<script type="text/javascript">  
    $(function (){  
        //显示隐藏  
        $(".header").click(function (){  
            var flag = $(".content").is(":hidden");  
            if(flag){  
                $(".content").show();  
            }else{  
                $(".content").hide();  
            }  
        });  
          
        /*  
        //使用bind的绑定事件,跟上上面的效果是一样的  
        $(".header").bind("click", function (){  
            var flag = $(".content").is(":hidden");  
            if(flag){  
                $(".content").show();  
            }else{  
                $(".content").hide();  
            }  
        });  
        */  
        /*  
        //鼠标的移入移出  
        $(".header").mouSEOver(function (){  
            $(".content").show();  
        }).mouSEOut(function (){  
            $(".content").hide();  
        });  
        */  
        /*  
        //合成事件 hover()  
        $(".header").hover(function (){  
            $(".content").show();  
        },function (){  
            $(".content").hide();  
        });  
        */  
          
    });  
</script>  
<body>  
    <h5 class="header" align="center">什么是jQuery？</h5>  
    <div class="content">  
        Jquery是继prototype之后又一个优秀的Javascript库。它是轻量级的js库 ，  
        它兼容CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+），  
        jQuery2.0及后续版本将不再支持IE6/7/8浏览器。  
        jQuery使用户能更方便地处理HTML（标准通用标记语言下的一个应用）、events、实现动画效果，  
        并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，  
        而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。  
        jQuery能够使用户的html页面保持代码和html内容分离，也就是说，  
        不用再在html里面插入一堆js来调用命令了，只需要定义id即可。  
    </div>  
</body>  
</html>

JS鼠标移入移出事件代码范例二

<!DOCTYPE html>
<html>
<head>
    <Meta charset="UTF-8">
    <title>百度</title>
    <style type="text/css">
    #wrap{
        width: 150px;height: 200px;
        /*background: rgb(211,211,211);*/
        margin: 200px auto 0px;
        text-align: center;
        position: relative;
        background: rgb(225,225,225);
    }
    a{
        color:white;
        display: inline-block;
        width: 150px;height: 20px;
    }
    .one{
        position: absolute;
        left: 70px;top: 14px;
        color: white;
    }
    #div1{
        width: 80px;height:81px;
        margin: 3px auto 0px;
        background: white;
    }
    #div1 a{
        display: inline-block;
        width:78px;
        height: 25px;
        color:black;
        font-size: 15px;
        line-height: 25px;
        text-decoration: none;
        position: relative;
        margin: 1px 1px;
        z-index: 1;
    }
    </style>
</head>
<body>
    <div id="wrap">
        <a href="#" id="set">设置</a>
        <span>♦</span>
        <div id="div1">
            <a href="#">搜索设置</a>
            <a href="#">高级搜索</a>
            <a href="#">搜索历史</a>
        </div>
    </div>
    <script type="text/javascript">
    var set = document.getElementById('set');
    var div1 = document.getElementById('div1');
    var one = document.getElementsByClassName('one');
    var two = document.getElementsByClassName('two');
    one[0].style.display = 'none';
    div1.style.display = 'none';
    set.onmouSEOver = function (){
        one[0].style.display = 'block';
        div1.style.display = 'block';
    }
    set.onmouSEOut = function (){
        one[0].style.display = 'none';
        div1.style.display = 'none';
    }
    two[0].onmouSEOver = function(){
        two[0].style.background = 'rgb(57,139,251)';
    }
    two[1].onmouSEOver = function(){
        two[1].style.background = 'rgb(57,139,251)';
    }
    two[2].onmouSEOver = function(){
        two[2].style.background = 'rgb(57,139,251)';
    }
    two[0].onmouSEOut = function(){
        two[0].style.background = 'white';
    }
    two[1].onmouSEOut = function(){
        two[1].style.background = 'white';
    }
    two[2].onmouSEOut = function(){
        two[2].style.background = 'white';
    }

    div1.onmouSEOver = function(){
        one[0].style.display = 'block';
        div1.style.display = 'block';
    }
    div1.onmouSEOut = function(){
        one[0].style.display = 'none';
        div1.style.display = 'none';
    }
    one[0].onmouSEOver = function(){
        one[0].style.display = 'block';
        div1.style.display = 'block';
    }
    one[0].onmouSEOut = function(){
        one[0].style.display = 'none';
        div1.style.display = 'none';
    }
    </script>
</body>
</html>

@H_404_0@进入页面时的效果是这样的：

@H_404_0@

@H_404_0@当鼠标移入设置上时，效果是这样的：

@H_404_0@

@H_404_0@当鼠标移入下面的选项的时候，背景颜色会变成蓝色：

@H_404_0@

@H_404_0@ 到鼠标移出设置或下面的3个选项时，页面就如第一张图所示。

以上是JS写法，下面是JQ的写法

@H_404_0@JQ的鼠标移入移出事件可以用两个函数写，亦可以用一个函数写：

@H_404_0@1、var a = $("#wrap");

@H_404_0@a.on（"mouSEOver",function(){"鼠标移入时想要的效果"}）；

@H_404_0@a.on("mouSEOut",function(){"鼠标移出事想要的效果"})；

@H_404_0@2、这一种方法类似于css中的hover效果，相对比而言更简单一点：

@H_404_0@var a = $("#wrap");

@H_404_0@a.hover(function(){"鼠标移入的效果"},function(){“鼠标移出时的效果”})；