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