需求:
实现鼠标悬停在div标签时,背景变为蓝色,字体变红变大,鼠标离开后
背景变白,字体变小
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>jquery事件</title><script src="js/jquery-1.12.4.min.js"></script><script>$(function(){var $div = $("div");// 鼠标悬停$div.mouseover(function(){$(this).css({"font-size":"40px","background":"blue","color":"red"});});// 鼠标离开$div.mouseout(function(){$(this).css({"font-size":"20px","background":"white","color":"black"});});})</script>
</head>
<body><div><ol><li>小红</li><li>小丽</li><li>小明</li></ol><input type="text" id="text1"><input type="button" value="点我一下试试" id="button"></div>
</body>
</html>
执行结果
程序运行
鼠标悬停
鼠标离开