鼠标滑过提示title
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
var x=20;
var y=0;
$(".tooltiptt").mouseover(function(e){
this.myTitle=this.title;
this.title="";
var tooltipdi="<div id='tooltipdi'><span><b></b><em></em>"+this.myTitle+"</span></div>";
$("body").append(tooltipdi); $("#tooltipdi").css(
{
"top": (e.pageY+y) + "px",
"left": (e.pageX+x) + "px"
}
).show("fast");
}).mouseout(function(){
this.title=this.myTitle;
$("#tooltipdi").remove();
}).mousemove(function(e){
$("#tooltipdi").css({
"top": (e.pageY+y) + "px",
"left": (e.pageX+x) + "px"
});
});
})
</script>
<style type="text/css">
*{ margin:0; padding:0;}
body{ font:14px "微软雅黑"; line-height:2; color:#333;}
p{ margin:20px; background:#eee; border-radius:5px; padding:0 10px; cursor:default} #tooltipdi{ position:absolute; right:0; top:0; float:left; z-index:99;}
#tooltipdi span{ font:14px "微软雅黑"; color:#666; float:left; background:#fff; border:1px solid #C8C8C8; padding:6px 12px; border-radius:5px;}
#tooltipdi span b{ display:block; position:absolute; left:-13px; top:10px; font-size:0; line-height:0; width:0; height:0; border-color:transparent; border-style:dashed; border-width:7px; border-right-color:#C8C8C8; border-right-style:solid;}
#tooltipdi span em{ display:block; position:absolute; left:-12px; top:10px; font-size:0; line-height:0; width:0; height:0; border-color:transparent; border-style:dashed; border-width:7px; border-right-color:#fff; border-right-style:solid;} </style> <p title="分数:740分" class="tooltiptt">1个太阳、2个月亮、2个星星,共多少积分呢?</p>
<p title="分数:840分" class="tooltiptt">1个太阳、2个月亮、2个星星,共多少积分呢?</p>
<p title="分数:940分" class="tooltiptt">1个太阳、2个月亮、2个星星,共多少积分呢?</p>
<p title="分数:1040分" class="tooltiptt">1个太阳、2个月亮、2个星星,共多少积分呢?</p>
<p title="分数:1140分" class="tooltiptt">1个太阳、2个月亮、2个星星,共多少积分呢?</p>
效果如下:
1个太阳、2个月亮、2个星星,共多少积分呢?
1个太阳、2个月亮、2个星星,共多少积分呢?
1个太阳、2个月亮、2个星星,共多少积分呢?
1个太阳、2个月亮、2个星星,共多少积分呢?
1个太阳、2个月亮、2个星星,共多少积分呢?
鼠标滑过提示title的更多相关文章
- jquery鼠标滑过提示title具体实现代码
jquery鼠标滑过提示title的实现代码. 如下: <script type="text/javascript" src="http://ajax.google ...
- jquery插件之表格隔行变色并鼠标滑过高亮显示
该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现表格隔行变色,且鼠标移动在表格的某一行上时,该行能高亮显示.整体代码如 ...
- css3—产品列表之鼠标滑过效果
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8" /> <title&g ...
- 鼠标划过图片title 提示实现
鼠标划过图片title 提示实现 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...
- CSS3鼠标滑过图标放大以及旋转
本人是HTML5-CSS3初学者,这次分享一款纯CSS3实现的图片动画,当鼠标滑过小图标时,图标会放大,同时图标会出现旋转的动画效果.我们在很多个性化个人博客中经常看到鼠标滑过人物头像后头像图片旋转就 ...
- CSS3鼠标滑过动画线条边框特效
基于CSS属性animation动画制作,效果流畅弹性十足 效果展示 http://hovertree.com/texiao/css3/32/ 源码下载:http://hovertree.com/h/ ...
- 鼠标滑过图片变暗文字链接滑出jQuery特效
效果体验:http://hovertree.com/texiao/jquery/7.htm HTML文件代码: <!DOCTYPE html> <html xmlns="h ...
- 鼠标滑过弹出jquery在线客服
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 分享十个CSS3鼠标滑过文字动画特效
介绍10组基于CSS3的鼠标滑过文字动画特效,有上凸.下凹等文字动画.这些炫酷的CSS3文字效果可以让网页变得更加绚丽.效果图如下: 在线预览 源码下载 实现的代码. html代码: <h2 ...
随机推荐
- ios开发——面试篇C语言精华
面试篇C语言精华 1.面向过程:分析解决问题所需要的步骤,然后用函数把这些步骤一步一步实 现. 面向对象:直接描述客观世界的对象及其相互关系.现实世界中任何实体都 可以看作是对象,对象之间通过消 ...
- Google搜索语法
原文:http://www.jianshu.com/p/37fe4f1381ef 前言 之前听过一个笑话,有人打开浏览器,输入www.baidu.com, 然后搜索框输入Google,查询google ...
- mysql修改表结构
表 linksus_gov_running_trans 和 linksus_gov_running 的 is_mulsplit_id 字段需要改成 bigint(20)原:`is_mulsplit_i ...
- BootStrap2学习日记13----关于按钮
普通按钮 代码: <div style="margin-bottom:15px"> <a href="#" class="" ...
- BootStrap2学习日记5---列表
常用列表标签有3中如下:<ul><li><ol><li><dl><dt><dd> 例子: <div class ...
- Ubuntu 下安装VNC server
尽管我们在大部分情况下用ssh登录Ubuntu服务器就好了,但是有时候我们的程序需要在图形界面下运行,这时我们就要用到vnc server这个软件了.在Ubuntu下安装vnc server很简单的, ...
- hdfs: 一个分布式文件系统(一)
一. hdfs设计的动机 为大规模分布式计算准备的分布式文件系统,并非实时性要求很高的文件系统. 二. 设计的取舍 1. 因为要求有高吞吐量,所以牺牲读取文件的实时性,实时性要求高的分布式文件系统可以 ...
- 【gradle报错】error: package org.apache.http does not exist
导入项目的时候gradle报错 error: package org.apache.http does not exist 解决方法: 在build.gradle中加入 android { use ...
- javaweb学习总结十九(http协议概述以及http请求信息分析)
一:http协议概述 1:http协议定义 2:使用telnet程序连接web服务器,获取资源 3:http协议:超文本传输协议,它是基于tcp/ip协议,就是建立在tcp/ip之上工作的, http ...
- 关于JDK中的集合总结(二)
1.2版本的JDK才出现的java集合框架. 下面介绍说一下Vector的一些特点. import java.util.Enumeration; import java.util.Iterator; ...