JS小案例（鼠标的移入移出）

最新推荐文章于 2024-04-07 13:01:24 发布

Lihonhyu

最新推荐文章于 2024-04-07 13:01:24 发布

阅读量719

点赞数 1

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_55880502/article/details/121627413

版权

本文介绍如何使用JavaScript实现元素的鼠标移入和移出事件，通过添加和移除CSS类来改变元素样式，达到动态交互的效果。

摘要由CSDN通过智能技术生成


<DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>mydemo</title>
        <style type="text/css">
            body,#outer p {margin:0;padding:0;}
            html,body {height:100%;}
            #outer {border:20px black solid;background:black;width:200px;height:200px; margin:10px auto;}
            #outer p {color: white;padding:10px;}
        </style>
        <script type="text/javascript">
            window.onload = function() {
            /*border,background,color,cursor*/
                var oDiv = document.getElementById("outer");
                var oP = document.getElementsByTagName("p")[0];
                oDiv.onmouseover = function() {
                    this.style.cssText="border-color:red;background:white;cursor:crosshair";
                    oP.style.cssText = "color:red";

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Lihonhyu

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JS小案例（鼠标的移入移出）

<DOCTYPE html><html> <head> <meta charset="utf-8"> <title>mydemo</title> <style type="text/css"> body,#outer p {margin:0;padding:0;} html,body {height:100%;} ..
复制链接

扫一扫