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

最新推荐文章于 2024-04-07 13:01:24 发布
最新推荐文章于 2024-04-07 13:01:24 发布
阅读量717 收藏 1
点赞数 1
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_55880502/article/details/121627413
版权 

<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元/天 解锁文章
Lihonhyu
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
鼠标经过样式js实现
04-20
鼠标经过样式js实现，方格下拉样式。纯学习目的、
JavaScript鼠标移入/移出改变样式
qq_44254672的博客
05-23 4228
编程目的：当鼠标放上按钮时div出现，当鼠标移出时div也随之消失。 <!DOCTYPE html> <html> <head> <title>鼠标移入/移出改变样式</title> <style type="text/css"> *{ margin: 0px...
js的鼠标移入移出事件
最新发布
FENGZXCjjjjj的博客
04-07 478
这篇博客给大家讲解一下js事件，鼠标移入移出，这两事件的用途十分广泛，是通过鼠标来实现具体操作的。这两个事件还可以同时绑给当个div,通过鼠标指针，所处范围来判断，是否在元素内，还是元素外。上图是具体写法，当然我们还可以添加更复杂的操作，大家快去实践起来吧。移入： onmouseenter（）移出：onmouseleave（）
JavaScript制作动态表格，HTML动态表格 ，JS实现鼠标移入到表格行中实现高亮，可全选，单选，反选，批量删除的动态表格，表格高亮操作
啊哈嗯嗯的博客
04-25 778
演示动画： 简单一点的动态表格：https://blog.csdn.net/weixin_44937336/article/details/105743738 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>全选_单选</ti...
js鼠标移入移出显示与隐藏
m0_61841946的博客
10-24 8923
<body> <divonmouseover="over(this)"onmouseout="out(this)">显示部分</div> <divid="Blk"style="display:none"> <h2>隐藏部分</h2> </div> </body> <script> function over() { //获取div里面名为"Blk"的id鼠标移入时将其显现 va...
【JavaScript源代码】js实现鼠标移入移出卡片切换内容.docx
12-29
　本文实例为大家分享了js实现鼠标移入移出卡片切换内容的具体代码，供大家参考，具体内容如下　案例动态效果图：　html代码：　<div class="sports-purple">　<div class="all">　<!-- 内容 -->　...
模拟京东商城鼠标悬浮图片放大效果代码
03-12
使用JavaScript面向对象编程思想模拟京东商城鼠标悬浮图片放大效果。该效果中包含鼠标移入图片显示放大，鼠标移出图片消失，点击图片按钮切换图片。
智能社JavaScript系列视频案例笔记
11-05
鼠标移入显示移出隐藏 代码： <style> #div1 {width:200px; height:100px; background:#CCC; border:1px solid #999; display:none;} </style> </head> <body> <input type="checkbox...
JavaScript页面事件案例.pdf
07-11
同时，`onmouseout`和`onmouseover`事件被用来实现鼠标移入和移出图片时的放大和缩小效果。当用户离开页面时，`onunload`事件被触发，弹出一个提示框向用户告别。 案例2展示了`onresize`事件的运用。这个事件在...
史上最经典的js案例，多达200案例
11-28
使用onMouseOver和onMouseOut事件可以实现鼠标移入移出时按钮的颜色变化。 ``` 找吧" name="B1" onMouseOut=this.style.color="blue" onMouseOver=this.style.color="red" class="button"> ``` 4. 平面按钮 通过...
JavaScript简单实现鼠标移动切换图片的方法
10-22
主要介绍了JavaScript简单实现鼠标移动切换图片的方法,涉及JavaScript针对鼠标事件的响应及页面元素的动态变换技巧,需要的朋友可以参考下
JS鼠标滑过图片时切换图片实现思路
10-26
在浏览网页时会看到这样的效果：当鼠标滑过一张图片后，这张图片切换为了另外的一张图片，下面为大家介绍下具体是如何实现的，感兴趣的朋友不要错过
JS移入移出
chenqiuqian的博客
04-28 4273
首先给一个id名为box设置宽高各为100像素，背景颜色为粉色，边框为一个像素黑色实线。 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="w...
JavaScript鼠标移动事件及案例
热门推荐
weixin_67224308的博客
10-17 1万+
于onmouseover相同但mouseenter事件只执行一次。鼠标移动都某个指点的HTML标签上时触发的事件。鼠标从HTML标签上移开时触发的事件。alert("按钮被点击")//被点击两次后弹出弹出框。alert("按钮被点击")//被点击后弹出弹出框。//找到按钮并设置双击击事件。//找到按钮并设置点击事件。鼠标双击时事件处理函数。
JS小项目实践-鼠标移入移出改变元素样式
莉亚小屋
06-11 1212
鼠标移入移出改变元素样式 来源：B站JS从入门到精通视频 题目描述 通过函数实现鼠标移入移出改变元素样式，如从小红色方块变为大绿色方块 题目代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> #div1 { width: 100px; height: 100px; back
页面标签鼠标移入时如何改变鼠标形状
八步赶蝉
04-25 2108
自定义鼠标图标(可能无效) .shou { cursor:url(../../wwwroot/lib/layui/v2.4.5/dist/images/face/31.gif) } .show{ cursor:pointer } <label class=" shou" >发布人</label> 其中pointer为一个手，其他形状如下： ...
js鼠标事件
QQQqq031110的博客
05-09 949
/ console.log("被点名了");// console.log("鼠标移动");//3. onmouseover : 鼠标移入事件。console.log("鼠标移入");console.log("鼠标移出");//5. onmousemove : 鼠标移动事件。//6. onmousedown : 鼠标按下事件。console.log("鼠标按下");console.log("鼠标抬起");//4. onmouseout : 鼠标移出事件。//7. onmouseup : 鼠标抬起事件。
html怎么向上浮动图,如何用js实现鼠标向上滚动时浮动导航
weixin_26782843的博客
06-03 805
为什么会有这个需求呢？有没有发现在国外的一些网站，当你向上滚动时，导航条浮动在顶部位置。用户如果是想看内容就可以直接点击到达，省去很多拖动的时间，当然返回顶部也是比较容易。但有时候返回顶部这个按钮往往被人忽略了。下面一起来看看代码和演示(引入jQuery 1.9)。判断鼠标向上滚动，或者向下滚动，可以通过对比用户的上一次滚动的坐标和下一次的坐标，当上一次小于下一次时，即用户在向下滚动，反之，则说明...
js 实现 hover鼠标移入移出时文字颜色变化
09-01
要实现hover鼠标移入移出时文字颜色变化，可以使用JavaScript来操作CSS样式。具体实现步骤如下： 1. 首先，在HTML中给需要操作的文字元素设置一个标识id或class。例如，给文字元素添加一个id属性为"myText"。 2. 在JavaScript中，通过getElementById()或getElementsByClassName()等方法获取这个文字元素。例如，使用getElementById()方法获取这个元素。 3. 使用addEventListener()方法添加鼠标移入和移出时的事件监听器。例如，为该文字元素添加鼠标移入事件监听器。 4. 在鼠标移入事件监听器中，使用style对象修改文字元素的样式。例如，修改文字元素的颜色属性为所需的颜色。可以使用style.color属性来修改。 5. 在鼠标移出事件监听器中，使用style对象恢复文字元素的原始样式。例如，恢复文字元素的颜色为原始颜色。可以使用style.color属性来还原。 综上所述，可以使用如下的JavaScript代码来实现hover鼠标移入移出时文字颜色变化： ```javascript var myText = document.getElementById("myText"); myText.addEventListener("mouseover", function() { myText.style.color = "red"; }); myText.addEventListener("mouseout", function() { myText.style.color = "black"; }); ``` 这样，当鼠标移入文字元素时，文字颜色会变为红色；当鼠标移出文字元素时，文字颜色会恢复为黑色。需要注意的是，需要将以上代码放在HTML元素加载之后进行执行，可以放在<script>标签内或外部的JavaScript文件中。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值