方法一:使用JQ添加和删除相应样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> div{ height: 600px; width: 300px; background-color: orange; } .a{ background-color: blue; } </style> <title>Title</title> <script src="jquery-3.1.1.min.js"></script> </head> <body> <div id="d"> sakdas </div> </body> <script> $('#d').mouseover(function () { $(this).addClass('a') }).mouseout(function () { $(this).removeClass('a') }) </script> </html>方法二:使用toggleClass,来回跳转样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> div{ height: 600px; width: 300px; background-color: orange; } .a{ background-color: blue; } </style> <title>Title</title> <script src="jquery-3.1.1.min.js"></script> </head> <body> <div id="d"> sakdas </div> </body> <script> $('#d').mouseover(function () { // 俩个状态来回切换 $(this).toggleClass('a') }).mouseout(function () { $(this).toggleClass('a') }) </script> </html>第三种,点击来回跳转
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> div{ height: 600px; width: 300px; background-color: orange; } .a{ background-color: blue; } </style> <title>Title</title> <script src="jquery-3.1.1.min.js"></script> </head> <body> <div id="d"> sakdas </div> </body> <script> $('#d').click(function () { $(this).toggleClass('a') }) </script> </html>