从之前的学习我们知道，鼠标移入和鼠标移出这两个事件往往都是配合一起使用的，而我们需要分别对这两个事件定义。为了简化代码，jQuery为我们提供hover()方法一次性定义这两个事件，这就是所谓的“合成事件”。
语法：
$().hover(fn1, fn2)
说明：
参数fn1表示鼠标移入事件触发的处理函数，参数fn2表示鼠标移出事件触发的处理函数。
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function () {
$("div").hover(function(){
$(this).css("color", "red");
},function(){
$(this).css("color", "black");
})
})
</script>
</head>
<body>
<div>绿叶，给你初恋般的感觉。</div>
</body>
</html>
浏览器预览效果如图所示。
分析：
初学的小伙伴对hover()这种写法可能会感到很陌生，也老是记不住。在hover()方法中，说白了就是插入两个function(){}，很简单。每次在使用hover()方法时，我们先把形式写出来，如下所示。
$().hover(function(){}, function(){})
形式写好了，再去编写两个function(){}中的内容，这样就不会导致书写错误了：
$().hover(function(){
//鼠标移入
}, function(){
//鼠标移出
})
hover()方法，准确来说是替代了mouseenter()和mouseleave()，而不是替代mouseover()和mouseout()。因此这个例子的hover()代码可以等价于：
//鼠标移入事件
$("div").mouseenter(function(){
$(this).css("color", "red");
})
//鼠标移出事件
$("div").mouseleave(function(){
$(this).css("color", "black");
})
有些小伙伴可能会问：“对于上面这个例子，我们使用CSS的:hover伪类不一样可以实现吗？而且比jQuery更加简单呢。”说得没错，不过CSS的:hover伪类只限于改变CSS样式，而对于更复杂的操作就没法了。请看下面的例子。
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
h3
{
height:40px;
line-height:40px;
text-align:center;
background-color:#ddd;
cursor:pointer;
}
div
{
display:none;/*设置默认情况下内容不显示*/
padding:10px;
border:1px solid silver;
text-indent:32px;
}
</style>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function () {
$("h3").hover(function(){
$("div").css("display", "block");
}, function(){
$("div").css("display", "none");
})
})
</script>
</head>
<body>
<h3>绿叶学习网</h3>
<div>绿叶学习网成立于2015年4月1日，是一个最富有活力的Web技术学习网站。在这里，我们只提供互联网最好的Web技术教程和最佳的学习体验。每一个教程、每一篇文章、甚至每一个知识点，都体现绿叶精品的态度。没有最好，但是我们可以做到更好！</div>
</body>
</html>
默认情况下，预览效果如图所示。
当鼠标移到标题上时，预览效果如图所示。
分析：
像上面这种操作，使用CSS的:hover伪类就无法实现了
