鼠标事件

样式

<style>
    .btnHover {
        background-color: #F40;
        color: #FFF;
        border: none;
    }

    #box {
        width: 300px;
        height: 300px;
        background-color: #EEE;
    }
</style>

body部分

<button id="toBD">click</button>
<input id="pos" type="text">
<div id="box"></div>
<script>
    //封装document.getElementById()，简洁化
    function getById(name) {
        return document.getElementById(name);
    }
    //点击跳转网页
    var bdBtn = getById("toBD");
    function pop() {
        window.location.href = "http://www.baidu.com";
    }
    bdBtn.onclick = pop;
    // 文本框悬浮样式事件

    bdBtn.onmouseenter = function () {
        this.className = "btnHover";
    }
    bdBtn.onmouseleave = function(){
        this.className = "";
    }

    var box = getById("box");
    box.onmousemove = function(){
        var x = event.x-this.offsetLeft;
        var y = event.y-this.offsetTop;
        pos.value = [x,y].join(":");
    }
</script>