第四章
实现鼠标经过字体变白吗，背景变蓝的效果，鼠标离开，恢复原来的样式。
<!DOCTYPE html> <html> <head> <title>Unit.html</title> <style type="text/css"> .a{ background: blue; color: white; } </style> <script type="text/javascript" src="../js/jquery-3.3.1.js"></script> <script type="text/javascript"> $(function(){ $("li").mouseover(function(){ $(this).addClass("a"); }); $("li").mouseleave(function(){ $(this).removeClass("a"); }); }); </script> </head> <body> 新手上路： <ul> <li>标题一</li> <li>标题一</li> <li>标题一</li> <li>标题一</li> <li>标题一</li> </ul> </body> </html>
输入提示效果
<!DOCTYPE html> <html> <head> <title>test1.html</title> <script type="text/javascript" src="../js/jquery-3.3.1.js"></script> <script type="text/javascript"> $(function(){ $("#username").click(function(){ $(this).val(""); }); $("#password").click(function(){ $(this).val(""); }); }); </script> </head> <body> <from> 用户名：<input type="text" value="用户名" style="color:gray;" id="username"><br><br> 密码：<input type="text" value="密码" style="color:gray;" id="password"><br><br> <input type="submit" type="login"> </from> </body> </html>