Jquery鼠标放上去显示全名的实现方法
第一种方式
使用mouseover、mouseout事件
// 鼠标滑过显示全名 var origin_name; $('.task_name').mouseover(function() { origin_name = $(this).text(); $(this).text($(this).nextAll("input").val()); }).mouseout(function() { $(this).text(origin_name); });
第二种方式
使用a标签的title属性
<a title="xxxx">缩写名</a>
鼠标发上去就会显示title的属性值
以上这篇Jquery鼠标放上去显示全名的实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。
相关推荐
-
jquery鼠标放上去显示悬浮层即弹出定位的div层
复制代码 代码如下: <script language="javascript" src="jquery-1.4.2.min.js"></script> <script> function show(obj,id) { var objDiv = $("#"+id+""); $(objDiv).css("display","block"); $(objD
-
Jquery鼠标放上去显示全名的实现方法
第一种方式 使用mouseover.mouseout事件 // 鼠标滑过显示全名 var origin_name; $('.task_name').mouseover(function() { origin_name = $(this).text(); $(this).text($(this).nextAll("input").val()); }).mouseout(function() { $(this).text(origin_name); }); 第二种方式 使用a标签的titl
-
jquery实现鼠标滑过显示提示框的方法
本文实例讲述了jquery实现鼠标滑过显示提示框的方法.分享给大家供大家参考.具体如下: 一.jquery鼠标滑过显示提示框实例 1.效果图 2.实现代码 ( 需要自行添加 jquery.js.按钮图片.提示框图片 ) HTML 代码 复制代码 代码如下: <!DOCTYPE> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF
-
JQuery实现鼠标移动图片显示描述层的方法
本文实例讲述了JQuery实现鼠标移动图片显示描述层的方法.分享给大家供大家参考.具体如下: 这里可结合 JQuery easing 的动画来配合使用. 主要代码如下: $(".item").hover( function() { //$(this).children("img").stop().animate({opacity: 0.8}, 700, "easeInSine"); $(this).children("div.title
-
jquery animate实现鼠标放上去显示离开隐藏效果
1.CSS样式: 复制代码 代码如下: @CHARSET "UTF-8"; * html .showbox,* html .overlay { position: absolute; top: expression(eval(document.documentElement.scrollTop) ); } #AjaxLoading { border: 1px solid #8CBEDA; color: #37a; font-size: 12px; font-weight: bold;
-
jquery预览图片实现鼠标放上去显示实际大小
复制代码 代码如下: <!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=&qu
-
jQuery实现鼠标悬停显示提示信息窗口的方法
本文实例讲述了jQuery实现鼠标悬停显示提示信息窗口的方法.分享给大家供大家参考.具体实现方法如下: <!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"
-
jquery实现鼠标滑过显示二级下拉菜单效果
本文实例讲述了jquery实现鼠标滑过显示二级下拉菜单效果.分享给大家供大家参考.具体如下: 这是一款jquery实现的下拉菜单,当鼠标移在主菜单上的时候,向下滑出二级子菜单,采用UL LI结构,便于修改完善,我觉得是很实用的菜单,希望大家平时能用得上. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-mouse-over-show-menu-codes/ 具体代码如下: <!DOCTYPE html> <head>
-
JQuery鼠标移到小图显示大图效果的方法
本文实例讲述了JQuery鼠标移到小图显示大图效果的方法.分享给大家供大家参考.具体分析如下: 这里的显示大图功能类似上一篇<JQuery实现超链接鼠标提示效果的方法>,稍微修改一下代码,就可以做出一个图片的提示效果. 参考前面的超链接提示效果的代码,只需要将创建的div元素的代码改为: //创建 div 元素 图片提示 var tooltip = "<div id="tooltip"><img src=""+ this.hr
-
jquery 文本上下无缝滚动,鼠标放上去就停止 小例子
复制代码 代码如下: <script src="../js/jquery-1.4.2.min.js" type="text/javascript"></script> <script type="text/javascript"> function AutoScroll(obj) { $(obj).find("ul:first").anima
随机推荐
- Oracle 11g如何清理数据库的历史日志详解
- Sql注入原理简介_动力节点Java学院整理
- sql server 2008 忘记sa密码的解决方法
- Oracle数据库密码文件的使用和维护
- PDO取Oracle lob大字段,当数据量太大无法取出的问题的解决办法
- oracle报错(ORA-00600)问题处理
- Bootstrap教程JS插件滚动监听学习笔记分享
- 初识ThinkPHP控制器
- php循环检测目录是否存在并创建(循环创建目录)
- 使用python分析git log日志示例
- 查看ASP详细错误提示信息的图文设置方法
- c++学习之构造函数
- smarty模板引擎从配置文件中获取数据的方法
- HTML中的XML数据岛记录编辑与添加
- Debian 9系统下修改默认网卡为eth0的方法
- 微信小程序 实现列表项滑动显示删除按钮的功能
- android编程实现局部界面动态切换的方法
- c#(Socket)异步套接字代码示例
- vue实现移动端轻量日期组件不依赖第三方库的方法
- Python Pandas 箱线图的实现