鼠标事件

博客内容提及了样式以及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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值