jQuery鼠标事件之mouseenter与mouseleave事件
上一节
下一节
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>16.3jQuery鼠标事件之mouseenter与mouseleave事件</title>
<script src="../js/jquery-3.1.1.min.js"></script>
<script>
$(function(){
//1.mouseenter():当鼠标指针穿过元素时候，会发生mouseenter事件
$('#p1').mouseenter(function(){$(this).css('color','red')});
//2.mouseleave():当鼠标指针离开元素时候，会发生mouseleave事件
$('#p2').mouseleave(function(){$(this).css('color','blue')});
//3.练习在同一个元素上,鼠标指针进入元素和离开元素时候，实现背景颜色的切换
$('#p3').mouseenter(function(){$(this).css('background','#ccc')})
.mouseleave(function(){$(this).css('background','#F9C')});
});
</script>
</head>
<body>
<p id="p1">鼠标指针进入此处，会改变字体颜色。</p>
<p id="p2">鼠标指针离开此处，会改变字体颜色。</p>
<p id="p3">鼠标指针进入和离开元素时候，实现背景颜色切换。</p>
</body>
</html>
效果图
