js特效
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> #div1 { position: relative; width: 200px; height: 50px; background-color: red; overflow: hidden; } #div2 { position: relative; width: 200px; height: 150px; top: 50px; background-color: blue; } #div3 { position: relative; width: 200px; height: 50px; background-color: green; } #div4 { position: relative; width: 200px; height: 50px; background-color: blue; } #div5 { position: relative; width: 200px; height: 50px; background-color: black; } </style> </head> <body> <div id="div1"> <div id="div2"> <div id="div3"></div> <div id="div4"></div> <div id="div5"></div> </div> </div> <script type="text/javascript"> var odiv1 = document.getElementById("div1"); odiv1.onmouseover = function () { odiv1.style.overflow = "visible"; odiv1.style.backgroundColor = "yellow"; } odiv1.onmouseout = function () { odiv1.style.overflow = "hidden"; odiv1.style.backgroundColor = "red"; } var odiv3 = document.getElementById("div3"); odiv3.onmouseover = function () { odiv3.style.backgroundColor = "red"; } odiv3.onmouseout = function () { odiv3.style.backgroundColor = "green"; } var odiv4 = document.getElementById("div4"); odiv4.onmouseover = function () { odiv4.style.backgroundColor = "white"; } odiv4.onmouseout = function () { odiv4.style.backgroundColor = "blue"; } var odiv5 = document.getElementById("div5"); odiv5.onmouseover = function () { odiv5.style.backgroundColor = "yellowgreen"; } odiv5.onmouseout = function () { odiv5.style.backgroundColor = "black"; } </script> </body> </html>