从之前的学习中我们知道,鼠标(指针)移入和鼠标(指针)移出这两个事件往往都是配合起来使用的,而我们需要分别对这两个事件定义。为了简化代码,jQuery 为我们提供了 hover() 方法来一次性定义这两个事件,这就是所谓的“合成事件”。
语法:
参数 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>
预览效果如图 1 所示。
初学的小伙伴对 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>城东书院 C语言学习</h3>
<div>城东书院成立于 2019 年初,目前已经运营了将近 2 年,我们致力于分享精品教程,帮助对编程感兴趣的读者。<p>
我们一直都在坚持的是:认认真真、一丝不苟、以工匠的精神来打磨每一套教程,让读者感受到作者的用心,以及默默投入的时间,由衷地心动和点赞。这样的教程是一件作品,而不是呆板的文字!<p></div>
</body>
</html>
默认情况下,预览效果如图 2 所示。
当鼠标指针移到标题上时,预览效果如图 3 所示。
像上面这种操作,使用 CSS 的 :hover 伪类就无法实现了。