鼠标放到文字链接上，文字的底色和本身色彩都会改变-脚本在线

首页前沿速递服务器教程网页设计教程网络编辑教程

移动端

AI智能体脚本智能办公脚本自动化游戏脚本浏览器自动化脚本服务器脚本

鼠标放到文字链接上，文字的底色和本身色彩都会改变

作者：互联网

2009-06-18

网页特效

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.***w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.***w3.org/1999/xhtml" lang="zh" xml:lang="zh"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="developer" content="Realazy" /> <title>Bubble in JavaScript DOM</title> <style type="text/css" media="screen"> div * {display:block; margin:4px; padding:4px; border:1px solid white;} textarea {width:20em; height:2em;} </style> <script type="text/javascript"> //<![CDATA[ function init(){ var log = document.getElementsByTagName('textarea')[0]; var all = document.getElementsByTagName('div')[0].getElementsByTagName('*'); for (var i = 0, n = all.length; i < n; ++i){ all[i].onmouseover = function(e){ this.style.border = '1px solid red'; log.value = '鼠标现在进入的是： ' + this.nodeName; }; all[i].onmouseout = function(e){ this.style.border = '1px solid white'; }; } var all2 = document.getElementsByTagName('div')[1].getElementsByTagName('*'); for (var i = 0, n = all2.length; i < n; ++i){ all2[i].onmouseover = function(e){ this.style.border = '1px solid red'; if (e) //停止事件冒泡 e.stopPropagation(); else window.event.cancelBubble = true; log.value = '鼠标现在进入的是： ' + this.nodeName; }; all2[i].onmouseout = function(e){ this.style.border = '1px solid white'; }; } } window.onload = init; //]]> </script> </head> <body> <h1>Bubble in JavaScript DOM</h1> <p>DOM树的结构是：</p> <pre><code> UL - LI - A - SPAN </code></pre> <div> <ul> <li><a href="#"><span>Bubbllllllllllllllle</span></a></li> <li><a href="#"><span>Bubbllllllllllllllle</span></a></li> </ul> </div> <textarea>

鼠标进入UL的任何一个子元素，如果不停止冒泡，我们从UL到SPAN都定义了鼠标悬停（mouseover）事件，这个事件会上升了UL，从而从鼠标所进入的元素到UL元素都会有红色的边。

如果停止冒泡，事件不会上升，我们就可以获取精确的鼠标进入元素。

相关标签:

网页特效

上一篇：直接在页面上的刷新按钮[网页特效] 下一篇：用按钮实现加入收藏夹及主页

相关推荐

多源异构数据融合技术实践：GIS、时序、文档与缓存数据整合方案在数字化时代，企业面临GIS地理信息、时序监控、文档存储、缓存加速等多源异构数据融合的严峻挑战。电科金仓自主研发的KES数据库管理系统，通过创新的多源数据迁移架构和统一存储引擎。

2026-04-15

立即查看

Real Thumbnail Generator v2.6.136 重新生成缩略图专业版 Real Thumbnail Generator 插件可以为 WordPress 网站生成单个或多个图片尺寸大小，以便在每个主题中正确显示图像等！并为上传缩略图创建 SEO 优化的自定义结构。Real Thumbnail Generator 比同类替代品效率高出 33%。Real Thumbnail

2026-04-15

立即查看

Python 变量 Python 变量目录什么是变量变量命名规则变量赋值数据类型类型转换变量的作用域可变与不可变类型最佳实践什么是变量变量是存储数据的容器,可以理解为给数据起的"名字"。通过变量名,

2026-04-15

立即查看

Python 流程控制语句 Python 流程控制语句目录条件语句 if 循环语句 for 循环语句 while 跳转语句 match-case 语句综合实战条件语句 if 基本语法 if-else 结构 if-elif

2026-04-15

立即查看

专题

#蛋仔派对

提供蛋仔派对最新官方活动解析

+ 收藏

#Grok

Grok脚本资源网站，提供G

+ 收藏

#Sora2

Sora2脚本资源网站，提供S

+ 收藏

#通义万相

通义万相脚本资源网站，提供通

+ 收藏

#海螺AI

海螺AI脚本资源网站，提供海

+ 收藏

#可灵AI

可灵AI脚本资源网站，提供可

+ 收藏

最新数据

用快捷键打开页面源代码或者是打印页面 <script langu

超级连接的下划线是红色的特效

鼠标放上去变色的按钮，而且有连接

在链接文字的周围会出现红边框

一个页面中的Real播放器[网页特效]

鼠标放在文字链接上出现精彩的说明文字

点击文字链接后，在链接旁边出现相应的图片

对输入框进行检测，通过就会在前面打勾表示通过

有没有见过不停闪烁的表格呀？

状态栏有间隔的跳马灯式样的文字

相关文章

使用Apparat框架优化Flash

一场关于YUI3/jQuery的精彩辩论

从if else到switch case再到抽象

BigPipe:高性能的"流水线技术"网页

跨域资源共享的10种方式

WEB移动应用框架构想

GC与JS内存泄露

三谈Iframe自适应高度

HTML5 WebSockets基础使用教程

精简高效的CSS命名准则和方法

AI精选

更多

超现实主义高细节图腾堆叠提示

Spring AI MCP Se

Vite内核解析-第4章插件系统与 Hook 机制

悉尼·斯威尼 (Sydney Sweeney) 的超逼真自拍提示词

全球 AI 双榜第一！力压谷歌 Veo 与 Grok，Vidu Q3「参考生」之王归来

Claude Code设计与实现-第17章 React + Ink 终端 UI

风格化异想天开猫脸网格

Nano Banana Pro 多帧生活肖像提示词

电影感沙漠人像，倚靠车头盖

2026年AI Agent开发实战：MCP协议深度解析与多智能体协作架构完全指南

脚本推荐

SeeDance 2.0 Video Creator专区

OpenClaw AI专区

cowork专区

claude code skills专区