沉默者cyz 2022-09-21 20:59 采纳率: 50%
浏览 81
已结题

请问如何用HTML和JS实现鼠标触碰文字跳动

使用JavaScript,当鼠标滑动到文字上(p元素)时,改变该元素的align属性,使文字左右跳动,实现动态效果。

img

img

  • 写回答

2条回答 默认 最新

  • AReTrnA 2022-09-21 21:22
    关注
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            #f,#p {
                position: absolute;
                top: 10px;
                padding: 0;
                margin: 0;
            }
            #p {
                width: 90%;
            }
            #f {
                color: transparent;
                user-select: none;
                cursor: default;
            }
        </style>
    </head>
    <body>
        <p id="p" align="left">跳动的文字</p>
        <font id="f" color="transparent">跳动的文字</font>
        <script>
            document.getElementById("f").onmouseenter = () => {
                document.getElementById("p").align = "right";
            }
            document.getElementById("f").onmouseleave = () => {
                document.getElementById("p").align = "left";
            }
        </script>
    </body>
    </html>
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(1条)

报告相同问题?

问题事件

  • 已结题 (查看结题原因) 9月21日
  • 已采纳回答 9月21日
  • 修改了问题 9月21日
  • 创建了问题 9月21日

悬赏问题

  • ¥15 输出区间内所有的完数的个数。 要简单点的程序
  • ¥15 asp.core 权限控制怎么做,需要控制到每个方法
  • ¥20 while循环中OLED显示中断中的数据不正确
  • ¥15 这个视频里的stm32f4代码是怎么写的
  • ¥15 串口发送数据和接收数据
  • ¥15 JNA调用DLL报堆栈溢出错误(0xC00000FD)
  • ¥15 请教SGeMs软件的使用
  • ¥15 自己用vb.net编写了一个dll文件,如何只给授权的用户使用这个dll文件进行打包编译,未授权用户不能进行打包编译操作?
  • ¥50 深度学习运行代码直接中断
  • ¥20 需要完整的共散射点成像代码