<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .nodeSmall { width: 50px; height: 50px; background: url(images/bgs.png) no-repeat -159px -51px; position: fixed; right: 10px; top: 40%; } .erweima { position: absolute; top: 0; left: -150px; } .nodeSmall a { display: block; width: 50px; height: 50px; } .hide { display: none; } .show { display: block; } </style> </head> <body> <div class="nodeSmall" id="node_small"> <div class="erweima hide" id="er"> <img src="images/456.png" alt=""/> </div> </div> <script src="common.js"></script> <script> // 当鼠标移入 onmouseover // 当鼠标移出 onmouseout var nodeSmall = my$('node_small'); nodeSmall.onmouseover = function () { // my$('er').className = 'erweima show'; my$('er').className = my$('er').className.replace('hide', 'show'); } nodeSmall.onmouseout = function () { // my$('er').className = 'erweima hide'; my$('er').className = my$('er').className.replace('show', 'hide'); } </script> </body> </html>
common中的内容
function my$(id) { return document.getElementById(id); }