jQuery事件详解之合成事件

1.hover()

语法结构

hover(enter,leave)

该方法用于模拟光标悬停事件。当光标移动到元素上时，会触发指定的第一个函数(enter),当光标移出，触发第二个函数（leave）。

代码演示

    <button>按钮</button>
    <p>鼠标状态:<span id="mouseState"></span></p>
    <script>
        $(function(){
            $("button").hover(function(){
                $("#mouseState").text('鼠标移入')
            },function(){
                $("#mouseState").text('鼠标移出')
            })
        })
    </script>

代码演示

拓展

（1）CSS中的伪类选择符，比如:hover，在大多数符合规范的浏览器中，伪类选择符可以生效。然而，在IE6中伪类选择符只能用于超链接元素。对于其他元素，可以使用jQuery的hover方法。

（2）hover方法主要替代的是bind("mouseenter")和bind("mouseleave"),而不是bind("mouseover")和bind("mouseout")。

2.toggle()

语法结构

toggle(fn1,fn2,...fnN)

toggle()方法用于模拟鼠标连续单击事件。第一次点击触发第一个函数，有几次单击事件就触发第几个事件，依次触发。之后的每次触发都重复对这几个函数的调用。

因为在1.9版本以上的jQuery已经废弃了toggle方法，故不再赘述，请查阅相关资料自行查看
toggle方法的使用（jquery中文网）

3.加强效果

实现以下功能：

鼠标移入标题，内容显示，移入内容，高亮。

首先在css中加入高亮

.highlight{background: #FF3300;}

代码演示

$(function(){
            $(".head").mouseover(function(){
                $(this).next().show();
            })
            $(".content").hover(function(){
                $(this).addClass("highlight")
            },function(){
                $(this).removeClass("highlight")
            })
        })

效果

代码演示