首先效果如下:

代码如下:

//这个是一个循环,循环所有name为xx的td标签(也就是给tdname为XXX的添加事件)
$("td[name='strGoodsSKU']").each(function(index,item){
var oldTest = $(this).text();
//如果td里的text长度大于了30个字符的话,后面的字符替换成。。。
if($(this).text().length>30){
var newText = $(this).text().substring(0,30);
$(this).text(newText+"...");
}
//开始添加鼠标滑过事件,传递两个function,function1为滑进事件,function2为滑出事件
$(this).hover( function () {
 //添加一个div,给div设置样式,并且显示到鼠标的旁边
$(document.body)
.append($('<div id="follower" style="width:500px;height:80px;border:1px solid #000;background:#e1e1e1;position:absolute"></div>'))
.mousemove(function(e){
$("#follower").text(oldTest).css({top:e.pageY+10,left:e.pageX+10})
})
},function(){
            //移除显示div
$("#follower").remove();
});
/* $(this).mouseleave( function () { }); */
});

鼠标滑至某位置,在鼠标旁边出现详情弹窗div的更多相关文章

  1. unity中让摄像机移动到鼠标点击的位置和鼠标控制平移视角

    private Vector3 targetVector3; private float movespeed=0.5f; private bool IsOver = true; private Gam ...

  2. jQuery hover事件鼠标滑过图片半透明标题文字滑动显示隐藏

    1.效果及功能说明 hover事件制作产品图片鼠标滑过图片半透明,标题文字从左到右滑动动画移动显示隐藏 2.实现原理 首先把效果都隐藏,然后定义一个伪类来触发所有的效果,接下来当触发伪类后会有一个遍历 ...

  3. 鼠标滑过侧边弹出内容(JS)

    效果展示 实现原理 1. html结构: <div id="contain"> <span id="share">分享</span ...

  4. [JQuery代码]超酷鼠标滑过背景高亮效果

    1.效果及功能说明 鼠标滑过悬停特效,div css制作产品列表图片布局通过鼠标滑过产品图片背景高亮闪烁显示,产品标题滑动显示或隐藏 2.实现原理 首先定义好一个重复实现效果的方法,然后定义光带出现速 ...

  5. echarts中跨域动态获取数据时,当某些对应的数据为空时,鼠标滑动到所在位置卡死

    才疏学浅,万望指点. formatter: function (params) { var rel = params[0].name + "<br />"; rel + ...

  6. Qt 样式表鼠标滑过按钮更改Text文本颜色

    QSS语法参考http://blog.csdn.net/liang19890820/article/details/51691212 Qt助手上也有比较详细的说明,选择器以及伪选择器,现在只是做个简单 ...

  7. CSS3鼠标滑过图标放大以及旋转

    本人是HTML5-CSS3初学者,这次分享一款纯CSS3实现的图片动画,当鼠标滑过小图标时,图标会放大,同时图标会出现旋转的动画效果.我们在很多个性化个人博客中经常看到鼠标滑过人物头像后头像图片旋转就 ...

  8. CSS3鼠标滑过动画线条边框特效

    基于CSS属性animation动画制作,效果流畅弹性十足 效果展示 http://hovertree.com/texiao/css3/32/ 源码下载:http://hovertree.com/h/ ...

  9. 鼠标滑过图片变暗文字链接滑出jQuery特效

    效果体验:http://hovertree.com/texiao/jquery/7.htm HTML文件代码: <!DOCTYPE html> <html xmlns="h ...

随机推荐

  1. wpf Content数据绑定StringFormat起作用的原理和解决

    原文:wpf Content数据绑定StringFormat起作用的原理和解决 <Window x:Class="WpfOne.Bind.Bind6" xmlns=" ...

  2. 自动备份Mysql数据库脚本

    [root@bogon ~]# cat auto_backup_mysql.sh #!/bin/bash #auto backup mysql db #by authors wugk #define ...

  3. selenium + ChromeDriver 实战系列之启信宝(一)

    之前写了一篇selenium + ChromeDriver的一些入门的知识,这篇博客里面找了启信宝这个网站,简单的进行了一个实战练习.本篇博客的结构如下:       首先会给出一些使用seleniu ...

  4. 通过Chrome扩展来批量复制知乎好友

        1.初始化文件 Chrome 官方扩展教程地址 新建一个文件夹 zhi-follow 下图中 1 部分为 默认的图标3种尺寸 会显示在 Chrome 中   2. 定义按钮样式   页面上会有 ...

  5. Android零基础入门第9节:Android应用实战,不懂代码也可以开发

    原文:Android零基础入门第9节:Android应用实战,不懂代码也可以开发 通过上一期的学习,我们成功开发了Android学习的第一个应用程序,不仅可以在Android模拟器上运行,同时还能在我 ...

  6. 仿win7窗体自动顶部最大化左侧右侧半屏效果(改写nativeEvent,使用AdjustWindowRectEx)

    #include "HMainWindow.h" #include <QApplication> #ifdef Q_OS_WIN #include <qt_win ...

  7. spring.net的简单使用(二)资源配置

    主要对资源配置做进一步的解析. 对资源位置的配置是在spring节点的context下,resource节点配置. spring.net的资源是可以设置在三种不同的位置的, 1.配置文件中 <r ...

  8. Qt 下快速读写Excel指南(尘中远)

    Qt Windows 下快速读写Excel指南 很多人搜如何读写excel都会看到用QAxObject来进行操作,很多人试了之后都会发现一个问题,就是慢,非常缓慢!因此很多人得出结论是QAxObjec ...

  9. 宿主机与虚拟机系统的USB设备切换

    有时候我们需要在虚拟机的操作系统中进行一些USB设备的测试,但默认情况下USB设备是在宿主机系统里面的,那这个时候我们就要进行切换才能够达到目的,具体要怎么操作呢?下面讲解一下:   1. Ctrl+ ...

  10. 用python的curl和lxml来抓取和分析网页内容

    Curl是一个强大的URL语法的客户端,支持DICT, FILE, FTP, FTPS, Gopher, HTTP, HTTPS, IMAP, IMAPS, LDAP, LDAPS, POP3, PO ...