js 鼠标移上去修改style属性
演示效果
鼠标移上去,颜色显示为红色,鼠标移开,颜色显示为黑色。
获取id对象:document.getElementById()
鼠标移上去:onmouseover
鼠标移开:onmouseout
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #box1{ height: 30px; text-align: center; font: 30px/30px "楷体"; } </style> </head> <body> <div id="box1"> 锣鼓一响,黄金万<span id="span">两</span> </div> <script> document.getElementById("box1").onmouseover = function(){ document.getElementById("span").style.color = "red"; }; document.getElementById("box1").onmouseout = function(){ document.getElementById("span").style.color = "#000"; }; </script> </body> </html>