鼠标事件

最新推荐文章于 2024-05-03 16:02:01 发布

Angle灬魔君

最新推荐文章于 2024-05-03 16:02:01 发布

阅读量187

点赞数

CC 4.0 BY-SA版权

分类专栏： js 前端文章标签： js事件鼠标事件

本文链接：https://blog.youkuaiyun.com/AMrss/article/details/95374223

前端同时被 2 个专栏收录

10 篇文章

订阅专栏

7 篇文章

订阅专栏

博客内容提及了样式以及body部分，可能与网页前端相关。虽未明确更多细节，但推测与前端页面构建有关，涉及到页面样式设置和body区域内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

样式

<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>