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的属性值

转载自http://www.jb51.net/article/104721.htm

时间: 2024-07-30 16:52:37

Jquery鼠标放上去显示全名的实现方法的相关文章

技巧三 Chart上曲线的点鼠标放上去显示横纵坐标

技巧三: 在chart的上曲线上的点 鼠标放上去,显示此点的横纵坐标代码如下:procedure TForm1.pntsrsSeries1MouseEnter(Sender: TObject);vari:integer;x1,y1:string;begin pntsrsSeries1.Cursor:=crHandPoint; cht1.showHint:=true; i:=cht1.Series[1].GetCursorValueIndex; x1:=FormatFloat('0.000',ch

css特效,鼠标放上显示标题说明

鼠标放上去,出现屏蔽层.标题.说明,第一个有3D上下滑动效果,第二个有渐变效果 两个css实现的效果图如下: 1. CSS样式特效 1 <style type="text/css"> 2 3 *{ 4 margin:0; 5 padding:0 6 } 7 8 body{font:400 14px/150% 'Microsoft YaHei',Tahoma, Helvetica, Arial, sans-serif; color:#424242; background:#f

td里的内容宽度自适应 及 鼠标放上显示标题div title

td里的内容自适应宽度, 用 width:100%控制 strRight+="<td bordercolor='#DEDEDE' width='500px' height='50px'><div title='"+data[i].description+"'><textarea rows='2' "+disWord+" class='txt' id='description' style='font-size:12px; co

eclipse调试鼠标放上去显示变量值

在eclipse中调试时,鼠标移动到变量上不显示值,这个原来自己也遇到过,没注意,反正就使用ctrl+shift+i嘛,也可以的,刚查了一下,解决方法如下: Window->Preferences->Java->Editor->Hovers 将[Variable Values]选择即可,如果第一个[Combined Hover]已经勾选,则将这个勾去掉,勾选[Variable Values].如果还不行,就只能用ctrl+shift+i快捷键了. 今天,同学在使用eclipse时遇

超出部分用省略号代替,鼠标放上去显示多余部分内容

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> #overplus { width:100px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;} #overplus:hov

鼠标放上去,div高度随文字增加,并显示剩余的文字。

/*这里是鼠标放上去显示全名   */    .kb2wText{display:block; height:20px; width:150px; line-height:20px; color:#000000; overflow:hidden;}    .kb2wText:hover { width:100%; overflow:visible;height:auto; z-index:99;background-color:#F9F9F9;word-break:break-all;} <di

Jquery的鼠标移动上去显示div,鼠标离开的时候隐藏div效果

有时候我们需要这个效果:当鼠标放上去的时候显示一个div,当鼠标移走的时候就将div隐藏了.代码如下,记得引入Jquyer库. <!DOCTYPE html><html><head runat="server">    <title></title>    <script src="js/jquery.js" type="text/javascript"></scrip

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:/

jquery.elevateZoom实现仿淘宝看图片,一张小的,一张大用于鼠标经过时候显示

实现这个效果你需要准备两张图片,一张小的,一张大用于鼠标经过时候显示.然后我们只要为img标签添加data-zoom-image属性,其值为大图的地址,最后在javascript中选择该图片调用elevateZoom()就可以了. 下面给出一个例子(在github下载的代码中有这个例子): 插件下载地址:https://github.com/elevateweb/elevatezoom [html] <!DOCTYPE html> <html> <head> <m