首先效果如下:

代码如下:

//这个是一个循环,循环所有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. 【iOS发展-49】的插件-插件该文档的凝视VVDocumenter安装与使用

    文件凝视是/**   */.快捷键///. 但是,这需要安装插件.VVDocumenter. 下载链接:https://github.com/onevcat/VVDocumenter-Xcode (1 ...

  2. “TNS-03505:无法解析名称”问题解决一例

    1.  问题情境 开发人员,在windows新环境ORACLEclient.配置"tnsnames.ora"后,准备连接Linux环境的ORACLE数据库,使用tnsping报TN ...

  3. iPhone开发笔记(20)EGOImageView的使用方法及注意事项

    EGOImageView是一种实现网络图片的异步加载和缓存的第三方类库,具有相同功能的第三方类库还有SDWebImage.但是相比两个类库的安装和使用来说,EGOImageView更简单一些,下面就介 ...

  4. C++中一个class类对象占用多少内字节(7个例子,很清楚)

    一个空的class在内存中多少字节?如果加入一个成员函数后是多大?这个成员函数存储在内存中什么部分? 一个Class对象需要占用多大的内存空间.最权威的结论是: *非静态成员变量总合. *加上编译器为 ...

  5. DevExpress XtraTreeList TreeList复选框选择

    权限管理涉及复选框多勾选. 1.控件属性设置 TreeList.OperationView.ShowCheckBoxes=true;用于显示CheckBox: TreeList.OperationBe ...

  6. WPF MVVM+EF 增删改查 简单示例(一)

    实现了那些功能,先看看效果图: 项目工程目录: 接下来开始具体的步骤: 第一步:在VS中新建工程 第二步:使用NuGet 安装EntityFramework 第三步:使用NuGet 安装EntityF ...

  7. Qt SizePolicy 属性(每个控件都有一个合理的缺省sizePolicy。QWidget.size()默认返回值是(640, 480),QWidget.sizeHint()默认返回值是(-1, -1))

    控件的sizePolicy说明控件在布局管理中的缩放方式.Qt提供的控件都有一个合理的缺省sizePolicy,但是这个缺省值有时不能适合 所有的布局,开发人员经常需要改变窗体上的某些控件的sizeP ...

  8. android studio 3.0+发布签名apk注意的情况

    在build.gradle for module文件中添加 lintOptions { checkReleaseBuilds false abortOnError false } 这样避免失败

  9. ORA-23421: job number 225 is not a job in the job queue

    在对数据库进行异机恢复之后,为了防止上面作业自动执行,扰乱正常业务系统,需要将测试库上的作业和db_link进行删除:但是使用sys用户连接进去,删除的时候报如下错误SQL> exec DBMS ...

  10. KmdKit4D 0.01正式版发布了(0.02版已放出)(Delphi做驱动)

    此版本较0.01预览版已经有了脱胎换骨的变化,主要表现在以下几个方面:    1.对程序的结构进行了调整,将原来的ntutils.dcu分成fcall.dcu.halfcall.dcu和macros. ...