HTML鼠标悬停显示隐藏div,JQ实现鼠标悬停显示或隐藏DIV层

$(document).ready(function(){

$("#div1").hide();   //先将层隐藏起来

var canHide = false; //标记是否可隐藏层

function doHide(){   //是否隐藏层中这里处理

if(canHide)

$("#div1").hide();

}

$("#a1").hover(function(){ //鼠标进入

$("#div1").show(); //显示

canHide = false; //标记不可隐藏

},function(){

canHide = true; //鼠标移出可隐藏

window.clearTimeout(t); //将上次的定时器清除,重新设置

var t = window.setTimeout(doHide,1000); //在间隔1000毫秒后执行是否隐藏处理

}

);

//主要依靠定时器来将两者关联起来

$("#div1").hover(function(){ //鼠标进入

canHide = false;    //不可隐藏

},function(){

canHide = true;     //鼠标移出可隐藏

window.clearTimeout(t);

var t = window.setTimeout(doHide,1000);

});

});

.div{

position: absolute;

width: 50px;;

height: 50px;

filter:alpha(opacity=30);

opacity:   0.2;

-moz-opacity:0.2;

background: gray;

}

测试测试

< /xml>

(二)鼠标放在链接文本上显示层，离开链接文本则层消失，像这样的，只要利用onmouseover,onmouseout事件即可(documnet.getElement.ById('div').style.display="none"/"block")

(三)还有一种呢，就是对datalist控件中标有链接的列实现鼠标悬停效果，鼠标停在哪一行的链接上则显示该行相应的信息或是显示相应图片之类的。像这样的效果，昨天同事告诉我一方法，我试了一下，效果是实现了，不过可能会有点麻烦，和大家分享一下。

大体的思路就是在datalist中的每一行里添加一个层，当鼠标移到该行的链接上时显示或是隐藏该层。

代码：

style="cursor: pointer;">

商品名：点击查看

物流号：

CellPadding="0" CssClass="box5">

样式表：

.postitle{filter:alpha(opacity=80);-moz-opacity:0.8;opacity: 0.8;background: url(http://www.w3css.com/down/jt.gif) 0 -10px no-repeat; margin-top: -12px; float:left;margin-left:70px;*margin-left:-40px; position:absolute;}

.flnone{ display:none; }

脚本：

function showName(obj) {

var divName = document.getElementById(obj);

divName.className = "postitle";

}

function showName2(obj) {

var divName = document.getElementById(obj);

divName.className = "flnone";

// divName.style.display = "none";

}

gvItems数据绑定：

for (int i = 0; i < count; i++)

{

GridView gvItems = (GridView)rpOderFilter.Items[i].FindControl("gvItems");

string dsLog = ds.Tables[0].Rows[i]["TXLOGISTICID"].ToString();

gvItems.DataSource = SQLServerDAL.HQ.CuPrelation.SeItems(dsLog);

gvItems.DataBind();

}