`
dcdc723
  • 浏览: 189846 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

jquery做的一个onmouse出tips帮助文档的一个效果

阅读更多
<!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">
 <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>测试</title>
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
  <style>
  .tool-tips{ position: absolute; visibility: hidden; z-index: 13000; color: #fff; width:200px; } 
  .tool-title{ font-size:13px; font-weight:bold; margin: 0; color: #9FD4FF;
  text-align: center; padding: 6px 6px 4px;
 background-color:#666;/*tips标题的背景*/
  } 
  .tool-text{
  padding: 4px 8px 8px; font-size:12px; color: #cf9; 
 background-color:#999;/*tips内容的背景*/
  }
  </style>
   </head>
    <body>
    <script> $(document).ready(function(){
$('<div class="tool-tips"><div class="tool-title"></div><div class="tool-text"></div></div>').appendTo('body'); //添加tips节点
$('abbr,acronym').mouseover(function(){  //添加onmouse的事件,可改为其他事件如click等
$(this).css('cursor','help'); //添加样式
$('.tool-tips').css('visibility','visible'); //可见
var tip = this;
if(tip.title){tip.arrs=tip.title;tip.title='';}
var arr = tip.arrs.split('|');//分割
if(arr.length>1){ myTitle = arr[0]; myText = arr[1]; 
}else{ myTitle = $(this).text(); myText = tip.arrs; }
$('.tool-title').html(myTitle); //为tips节点加标题
$('.tool-text').html(myText); //加内容
}).mousemove(function(e){ $('.tool-tips').css('top',e.pageY+15);
$('.tool-tips').css('left',e.pageX+15); }).mouseout(function(){ $('.tool-tips').css('visibility','hidden'); })
}) 
</script>
<abbr title="测试的内容">测试</abbr><br/>
<abbr title="this is content">test</abbr><br/>
<abbr title="巅峰网络公司专注于:网站建设、网站设计、网站优化(SEO)、网络推广、品牌网站建设、网页设计 
">巅峰网络,http://www.tipnet.cn</abbr><br/>
 <acronym title="Cascading Style Sheets">CSS</acronym> 
    
</body>
 </html> 

 运行效果

  • 大小: 5.6 KB
7
1
分享到:
评论
9 楼 dcdc723 2010-03-10  
D-tune 写道
纯css的tips不是跟好吗

纯CSS的肯定比较好。但是涉及到帮助信息是从数据库中读取的时候就不能实现了。
各有所长。
8 楼 D-tune 2010-03-10  
纯css的tips不是跟好吗
7 楼 happysoul 2010-03-09  
果然IE6兼容有点问题 只有最后一个“CSS”那行可以看到效果
用的IE8 测试环境 IEtest
6 楼 dcdc723 2010-03-04  
sarin 写道
标题伸长时,两部分长度不一致

可以把标题的DIV删除,把标题放到tip内容中换行居中即可。。
5 楼 pouyang 2010-03-04  
我的ie6没有效果
4 楼 sarin 2010-03-03  
标题伸长时,两部分长度不一致
3 楼 怕瓦落地 2010-03-03  
马的脸猛鹿 写道
相当不错的效果,简单明了。

2 楼 马的脸猛鹿 2010-03-03  
相当不错的效果,简单明了。
1 楼 dedemao 2010-03-03  
不错的效果啊。~~~

相关推荐

    jQuery实现实用的动态信息提示框tips效果可用在超级链接或图片上.zip

    提示框(Tips)通常是一个小型的弹出窗口,显示与用户交互元素相关的额外信息。这种效果可以在鼠标悬停或点击特定元素时出现,帮助用户理解页面内容或者提供操作指导。在jQuery中实现这样的功能,我们主要需要以下...

    jQuery实现图片提示功能

    在网页设计中,jQuery是一个非常流行的JavaScript库,它极大地简化了DOM操作、事件处理和动画效果。本教程将深入探讨如何使用jQuery实现一种常见的交互功能:当用户将鼠标悬停在小图片上时,显示对应的大图片作为...

    Web中定制页面提示信息(tooltips)

    这个压缩包文件"Web中定制页面提示信息(tooltips)"提供了一个纯JavaScript实现的tooltip效果,特别地,它利用了jQuery库来增强交互性和易用性。下面将详细介绍如何使用jQuery实现自定义的tooltip功能,并探讨其...

    (源码)基于 Koa2 的 FEBLOG API.zip

    # 基于 Koa2 的 FEBLOG API ## 项目简介 FEBLOG API 是一个基于 Node.js 和 Koa2 框架的 RESTful API 服务器,支持多种关系型数据库(如 PostgreSQL、MySQL、MariaDB、SQLite、MSSQL),并使用 Sequelize 作为 ORM。项目支持跨域请求、JSON 数据传输、JWT 身份认证等功能,适用于构建前后端分离的应用。 ## 主要特性和功能 跨域支持通过配置支持跨域请求。 数据传输格式支持 applicationxwwwformurlencoded、multipartformdata、applicationjson 格式的 POST、PUT、DELETE 请求。 JWT 身份认证通过 JWT 实现用户身份认证。 数据库支持使用 Sequelize ORM 支持 PostgreSQL、MySQL、MariaDB、SQLite、MSSQL 等多种数据库。

    存储器实验资料.zip

    存储器实验资料.zip

    (源码)基于 Python 的知乎热榜爬虫及数据处理项目.zip

    # 基于 Python 的知乎热榜爬虫及数据处理项目 ## 项目简介 本项目基于 Python 编程语言,旨在实现知乎热榜的定时跟踪以及相关数据的存储与查询操作。通过爬虫技术获取知乎热榜问题的详细信息,将数据存入数据库,同时提供一系列 SQL 查询示例帮助用户熟悉 SQL 基本语法,还包含使用 Selenium 实现 GPA 计算器的功能。 ## 项目的主要特性和功能 1. 知乎热榜爬虫定期爬取知乎热榜,获取问题摘要、描述、热度、访问人数、回答数量等基本信息,并将数据存入数据库。 2. 可定制爬虫逻辑用户可以选择删除已有代码从零开始编写,也可以完成代码填空实现相应功能。 3. GPA 计算器使用 Selenium 模拟点击登录 WebVPN,登录 info 并访问成绩单页面,查询成绩并计算每学期的绩点。 4. SQL 练习提供一系列基于 MySQL 数据库的 SQL 查询练习,帮助用户熟悉基本的 SQL 语法,如添加新列、数据填充、关键词查询等。

    (源码)基于C语言的学生信息管理系统.zip

    # 基于C语言的学生信息管理系统 ## 项目简介 这是一个基于文本界面的学生信息管理系统,旨在通过简单的文本输入实现学生信息的添加、查找、修改和删除操作。系统采用链表数据结构存储学生信息,并支持文件读写功能以持久化存储数据。 ## 项目的主要特性和功能 ### 主要特性 1. 文本界面操作用户通过控制台输入指令完成操作。 2. 链表数据结构使用链表存储学生信息,方便信息的添加和删除。 3. 文件操作支持将学生信息数据保存到文件,以及从文件中读取数据。 ### 功能详解 登录验证用户需输入正确的学号和密码才能进入系统。 主界面展示显示系统主菜单,包括学生信息查找、删除、添加、修改和录入等功能。 学生信息查找根据学号查找学生信息。 学生信息删除根据学号删除学生信息。 学生信息添加可以添加新的学生信息到系统中。 学生信息修改可以修改已存在的学生信息。 学生信息录入展示所有存储的学生信息。 辅助功能

    (源码)基于VS Code的px到rpx转换工具.zip

    # 基于VS Code的px到rpx转换工具 ## 项目简介 本项目是一款VS Code插件,旨在将前端代码里的单位px转换为rpx。当设计师在设计稿中使用px单位时,开发者能够借助该工具快速把代码中的px转换为小程序适用的rpx单位。它借助语法分析技术实现精准转换,避免误改其他属性里的px。 ## 项目的主要特性和功能 1. 自动转换功能能通过简单命令自动识别并转换style标签内所有声明中的px为rpx。 2. 精准转换利用语法分析,仅对真正的单位值进行转换,防止错误修改其他内容中的px字符。 3. 部分转换支持可选择部分样式代码进行转换,操作灵活便捷。 ## 安装使用步骤 假设用户已下载本项目源码文件且安装了VS Code环境。 1. 安装插件打开VS Code,进入侧边栏的扩展视图,搜索并安装“px2rpx”插件。 2. 重启VS Code安装完成后重启VS Code使插件生效。

    test文件资包 传递使用

    test文件资包。传递使用

    LCCC2701 智能车灯控制系统设计 20250329

    主控:AT89C52 显示:LCD1602 光照检测:光敏电阻 距离检测:超声波测距 远光灯 近光灯 按键(设置阈值) 1、使用光敏电阻实时检测环境光线强度,设置阈值判断是否开启远光灯; 2、利用超声波传感器测量迎面车辆距离,设置安全距离阈值,自动切换到近光灯; 3、加入延时功能(例如在检测到迎面车辆后等待3秒再切换灯光),以减少频繁切换,提升平滑性。 4、所选传感器模块、执行器模块、电源与接口电路等模块的型号需要是便宜的。

    ESP32之阿里云OTA固件升级(源码)

    esp-idf-v5.3.2

    信息安全领域实战项目【信息安全领域】实战项目汇总:涵盖网络渗透测试、Web应用安全加固、企业安全策略制定等内容多个信息安全领域的实战

    内容概要:本文介绍了多个信息安全领域的实战项目,涵盖网络渗透测试、Web应用安全加固、企业安全策略制定与实施、恶意软件分析、数据泄露应急响应、物联网设备安全检测、区块链安全审计和云安全防护。每个项目都详细描述了其目标和具体实施步骤,包括信息收集、漏洞扫描、利用和修复、安全配置、风险评估、制度建设、培训教育、样本获取与分析、事件响应、遏制措施、调查取证、数据恢复、安全检测、架构分析、智能合约审计、共识机制审查、云环境评估、访问管理、网络安全防护等方面。 适合人群:信息安全从业者、IT管理人员、安全顾问、系统管理员、开发人员以及对信息安全感兴趣的人员。 使用场景及目标:①为信息安全从业人员提供实际操作指导,帮助其掌握不同场景下的安全防护技能;②为企业提供全面的信息安全保障方案,确保其信息系统和数据的安全性;③为开发人员提供安全编码和系统设计的最佳实践指南,提高应用程序的安全性;④为安全研究人员提供深入分析恶意软件和区块链系统的工具和方法。 阅读建议:读者可以根据自身需求选择感兴趣的部分进行深入学习,建议结合实际案例进行实践操作,同时关注最新的安全技术和法规要求,以确保所学知识与时俱进并能应用于实际工作中。

    (源码)基于C语言和STM32F0系列微控制器的宏键盘系统.zip

    # 基于C语言和STM32F0系列微控制器的宏键盘系统 ## 项目简介 本项目是基于C语言和STM32F0系列微控制器开发的宏键盘系统。该系统可让用户自定义宏按键,实现快速输入或自动化任务,涵盖硬件的GPIO输入输出控制、USB通信以及中断处理等功能。 ## 项目的主要特性和功能 宏定义用户能通过定义keymappings.h文件中的宏按键,自定义按键行为。 USB通信利用STM32F0系列微控制器的USB库,支持HID类通信。 GPIO控制实现对键盘按键读取和发送操作的控制。 中断处理可处理按键状态变化、USB通信等外部中断请求。 电源管理对微控制器的睡眠、停止和待机等电源模式进行管理。 ## 安装使用步骤 ### 硬件准备 确保STM32F0系列微控制器(如STM32F042K6)的GPIO引脚、USB接口等硬件连接正确。 保证所有必要外设(如LED、按键)正确连接且可用。 ### 软件准备 下载并解压项目源代码。

    COMSOL多物理场仿真中熔池枝晶模型的构建与应用

    内容概要:本文详细介绍了如何利用COMSOL Multiphysics软件构建熔池枝晶模型,用于模拟金属在凝固过程中枝晶的生长行为。主要内容涵盖三个关键模块:传热、流体流动和相场。通过定义相应的偏微分方程(如传热方程、Navier-Stokes方程和相场方程),设置适当的边界条件和初始条件,并进行多物理场耦合求解,最终实现了对熔池温度分布、速度场及枝晶生长过程的精确模拟。此外,还探讨了如何优化求解器配置、处理移动边界条件、引入各向异性效应以及提高计算效率的方法。 适合人群:从事材料科学、冶金工程、增材制造等领域研究的专业人士和技术人员。 使用场景及目标:适用于需要深入了解金属凝固过程中微观结构演变机制的研究项目,特别是在激光熔覆、焊接等工艺中,帮助研究人员预测和优化材料性能。 其他说明:文中不仅提供了详细的建模步骤指导,还包括一些实用技巧,如参数选择、网格划分策略、热源耦合方式等,有助于解决实际建模过程中可能遇到的问题。

    基于COMSOL的地下二氧化碳封存多物理场耦合仿真研究

    内容概要:本文详细介绍了利用COMSOL Multiphysics进行地下二氧化碳封存仿真的方法和技术要点。主要内容涵盖两相流模块设置、温度场耦合、地层分层建模以及力学模块处理等方面。文中不仅提供了具体的数学模型和代码片段,如相对渗透率函数、热膨胀系数函数等,还分享了许多实际操作中的经验和教训,强调了不同物理场之间的相互作用及其对模拟结果的影响。 适合人群:从事地质工程、环境科学、石油工程等领域研究的专业人士,尤其是那些需要进行地下流体运移和储层特性研究的科研工作者。 使用场景及目标:适用于希望深入了解地下二氧化碳封存机制的研究人员,帮助他们掌握如何使用COMSOL软件构建复杂的多物理场耦合模型,从而更好地预测和评估二氧化碳封存的安全性和有效性。 其他说明:文章中提到的技术细节对于确保模拟精度至关重要,例如正确处理单位转换、选择合适的渗透率模型、考虑温度变化对岩石性质的影响等。此外,作者还提醒读者应注意避免一些常见的错误配置,以免导致不可靠的结果。

    ENCAP 2023打分表

    ENCAP 2023打分表

    中国上市公司协会:2022年中国上市公司董事会秘书履职报告.pdf

    中国上市公司协会:2022年中国上市公司董事会秘书履职报告

    MATLAB遗传算法解决电动车带时间窗路径规划与充电优化问题

    内容概要:本文详细介绍了利用MATLAB遗传算法解决带有时间窗约束的电动车路径规划和充电优化问题。首先,构建了客户点、充电站以及电动车的基本参数模型,然后设计了一套完整的遗传算法框架,包括染色体编码、适应度函数、交叉变异操作等。适应度函数综合考虑了总行驶距离、时间窗违约、电量透支等多个因素。通过多次迭代优化,最终得到了较优的路径规划方案,并展示了实验结果的可视化图形。此外,文中还讨论了一些调参技巧和实际应用中的注意事项。 适合人群:具有一定编程基础和技术背景的研究人员、工程师,特别是从事智能交通系统、物流配送优化领域的专业人士。 使用场景及目标:适用于需要进行电动车路径规划和充电管理的实际应用场景,如城市物流配送公司。主要目标是在满足客户需求和服务质量的前提下,最小化运营成本,提高车辆利用率。 其他说明:文中提供了详细的代码实现步骤和部分实验数据,有助于读者理解和复现研究结果。同时提到了一些实用的小技巧,如适当放宽时间窗惩罚系数可以降低总成本等。

    (源码)基于Arduino的超声波距离测量系统.zip

    # 基于Arduino的超声波距离测量系统 ## 项目简介 本项目是一个基于Arduino平台的超声波距离测量系统。系统包含四个超声波传感器(SPS)模块,用于测量与前方不同方向物体的距离,并通过蜂鸣器(Buzz)模块根据距离范围给出不同的反应。 ## 项目的主要特性和功能 1. 超声波传感器(SPS)模块每个模块包括一个超声波传感器和一个蜂鸣器。传感器用于发送超声波并接收回波,通过计算超声波旅行时间来确定与物体的距离。 2. 蜂鸣器(Buzz)模块根据超声波传感器测量的距离,蜂鸣器会给出不同的反应,如延时发声。 3. 主控制器(Arduino)负责控制和管理所有传感器和蜂鸣器模块,通过串行通信接收和发送数据。 4. 任务管理通过主控制器(Arduino)的 loop() 函数持续执行传感器任务(Task),包括测距、数据处理和蜂鸣器反应。 ## 安装使用步骤 1. 硬件连接

Global site tag (gtag.js) - Google Analytics