求助 关于DIV显示的问题 现在的想达到的效果类似于 139邮箱里面 通讯录里面那种把鼠标放上去就显示一个DIV的效果

enderboy520 2010-08-27 12:27:02
我的CODE如下 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>无标题文档</title>

<style type="text/css"> 

<!--

body {

	margin-left: 0px;

	margin-top: 0px;

	margin-right: 0px;

	margin-bottom: 0px;

	background-color: #EFF7F9;

}

-->

</style>

<script src="/static/scripts/AC_RunActiveContent.js" type="text/javascript"></script>

<link href="/static/css/css.css" rel="stylesheet" type="text/css" />

    <script language="javascript" type="text/javascript"> 

var cX = 0; var cY = 0; var rX = 0; var rY = 0;

 

function ShowContent(d) {

if(d.length < 1) { return; }

var dd = document.getElementById(d);

dd.style.zIndex=100;

d.left =event.x + 'px';

d.top = event.y + 'px';

dd.style.display = "block";

dd.style.position = 'absolute';

}

 

function HideContent(d) {

if(d.length < 1) { return; }

document.getElementById(d).style.display = "none";

}

 

function AssignPosition(d) {

if(self.pageYOffset) {

	rX = self.pageXOffset;

	rY = self.pageYOffset;

	}

else if(document.documentElement && document.documentElement.scrollTop) {

	rX = document.documentElement.scrollLeft;

	rY = document.documentElement.scrollTop;

	}

else if(document.body) {

	rX = document.body.scrollLeft;

	rY = document.body.scrollTop;

	}

if(document.all) {

	cX += rX; 

	cY += rY;

	}

d.style.position = 'absolute';

 

d.style.left =event.x + 'px';

d.style.top = event.y + 'px';

 

}

 

function showme(i)

{

document.getElementById(i).style.display="block";

if(document.getElementById("hidden1").value!=""&&document.getElementById("hidden1").value!=i)

{

document.getElementById(document.getElementById("hidden1").value).style.display="none";

}

document.getElementById("hidden1").value=i;

}

 

function Closed(i)

{

 

//document.getElementById(i).style.display="none";

}

 

document.onclick = function(evt){//在不是连接的位置单击时,隐藏 显示的层

 var _target = evt ? evt.target : event.srcElement ;

 var _id = _target.id;

 if( _id == "" ){

  _id = _target.tagName;

 }

 if( _id !="input"){

// var aa=document.getElementById("hidden1").value;

//document.getElementById(aa).style.display="none";

 }

}

 

function linkloction(tt)

{

 self.location='http://www.mabelle.com//products/search/'+tt;

}

 

</script>

</head>



</html>



但是效果不佳

不知道为何 ？

有达人可否为俺解惑？

...全文
160 12 打赏 收藏 转发到动态 举报
写回复
用AI写文章
12 条回复
切换为时间正序
请发表友善的回复…
发表回复
enderboy520 2010-08-28
  • 打赏
  • 举报
 回复
[Quote=引用 11 楼 koukoujiayi 的回复:]
在你的div上仍然要加上onmouseover和onmouseout,例如你的第一行:
<td>10周年</td><td>
<span id="ctl00_cphContent_GridView1_ctl02_Label2"><span onmouseover="javascript:ShowContent('div1_0');" onmouseout="javascript:HideCont……
[/Quote]

这个我加了 然后 主要的问题没找到
尐孑 2010-08-27
  • 打赏
  • 举报
 回复
关注一下 我都是用AJAX的
demoooo 2010-08-27
  • 打赏
  • 举报
 回复
139的全AJAX, 下载来分析很费劲.你这个也可以啊. 效果用css定义下也不错哦
enderboy520 2010-08-27
  • 打赏
  • 举报
 回复 


<body>



<table cellspacing="0" rules="all" border="1" id="ctl00_cphContent_GridView1" style="width:650px;border-collapse:collapse;">

		<tr>

			<th class="white_size12" scope="col" style="background-color:#2B5691;">推广名称</th><th class="white_size12" scope="col" style="background-color:#2B5691;">推广货品</th><th class="white_size12" scope="col" style="background-color:#2B5691;">推广时段</th><th scope="col" style="background-color:#2B5691;width:30px;"> </th>

		</tr><tr>

			<td>10周年</td><td>

                                                <span id="ctl00_cphContent_GridView1_ctl02_Label2"><span onmouseover="javascript:ShowContent('div1_0');" onmouseout="javascript:HideContent('div1_0');" >F05566R</span><div id="div1_0" style="display:none;position:relative;" onmouseout="javascript:HideContent('div1_0');"><table border="1" width="100px"  height="100px" bgcolor="#FF0000"><tr><td><table class="white_size12" bgcolor="#2B5691"><tbody><tr><td>暂时无数据</tr></td></tbody></table></td></tr></table></div>    <span onmouseover="javascript:ShowContent('div1_1');" onmouseout="javascript:HideContent('div1_1');" > F05466R</span><div id="div1_1" style="display:none;position:relative;" onmouseout="javascript:HideContent('div1_1');"><table border="1" width="100px"  height="100px" bgcolor="#FF0000"><tr><td><table class="white_size12" bgcolor="#2B5691"><tbody><tr><td>暂时无数据</tr></td></tbody></table></td></tr></table></div>    <span onmouseover="javascript:ShowContent('div1_2');" onmouseout="javascript:HideContent('div1_2');" > F05446R/M</span><div id="div1_2" style="display:none;position:relative;" onmouseout="javascript:HideContent('div1_2');"><table border="1" width="100px"  height="100px" bgcolor="#FF0000"><tr><td><table class="white_size12" bgcolor="#2B5691"><tbody><tr><td>暂时无数据</tr></td></tbody></table></td></tr></table></div>    </span>

                                            </td><td>

                                                <span id="ctl00_cphContent_GridView1_ctl02_Label1">11/11/2008 至 11/11/2010</span>

                                            </td><td>

                                                <a id="ctl00_cphContent_GridView1_ctl02_HyperLink1" href="ShopPromotionDetail.aspx?content=1">详情</a>

                                            </td>

		</tr><tr>

			<td>aaaa</td><td>

                                                <span id="ctl00_cphContent_GridView1_ctl03_Label2"><span onmouseover="javascript:ShowContent('div2_0');" onmouseout="javascript:HideContent('div2_0');" >F05566R</span><div id="div2_0" style="display:none;position:relative;" onmouseout="javascript:HideContent('div2_0');"><table border="1" width="100px"  height="100px" bgcolor="#FF0000"><tr><td><table class="white_size12" bgcolor="#2B5691"><tbody><tr><td>暂时无数据</tr></td></tbody></table></td></tr></table></div>    <span onmouseover="javascript:ShowContent('div2_1');" onmouseout="javascript:HideContent('div2_1');" > F05466R</span><div id="div2_1" style="display:none;position:relative;" onmouseout="javascript:HideContent('div2_1');"><table border="1" width="100px"  height="100px" bgcolor="#FF0000"><tr><td><table class="white_size12" bgcolor="#2B5691"><tbody><tr><td>暂时无数据</tr></td></tbody></table></td></tr></table></div>    <span onmouseover="javascript:ShowContent('div2_2');" onmouseout="javascript:HideContent('div2_2');" > F05446R/M</span><div id="div2_2" style="display:none;position:relative;" onmouseout="javascript:HideContent('div2_2');"><table border="1" width="100px"  height="100px" bgcolor="#FF0000"><tr><td><table class="white_size12" bgcolor="#2B5691"><tbody><tr><td>暂时无数据</tr></td></tbody></table></td></tr></table></div>    </span>

                                            </td><td>

                                                <span id="ctl00_cphContent_GridView1_ctl03_Label1">11/11/2008 至 11/11/2010</span>

                                            </td><td>

                                                <a id="ctl00_cphContent_GridView1_ctl03_HyperLink1" href="ShopPromotionDetail.aspx?content=2">详情</a>

                                            </td>

		</tr><tr>

			<td>bbb</td><td>

                                                <span id="ctl00_cphContent_GridView1_ctl04_Label2"><span onmouseover="javascript:ShowContent('div3_0');" onmouseout="javascript:HideContent('div3_0');" >F05566R</span><div id="div3_0" style="display:none;position:relative;" onmouseout="javascript:HideContent('div3_0');"><table border="1" width="100px"  height="100px" bgcolor="#FF0000"><tr><td><table class="white_size12" bgcolor="#2B5691"><tbody><tr><td>暂时无数据</tr></td></tbody></table></td></tr></table></div>    <span onmouseover="javascript:ShowContent('div3_1');" onmouseout="javascript:HideContent('div3_1');" > F05466R</span><div id="div3_1" style="display:none;position:relative;" onmouseout="javascript:HideContent('div3_1');"><table border="1" width="100px"  height="100px" bgcolor="#FF0000"><tr><td><table class="white_size12" bgcolor="#2B5691"><tbody><tr><td>暂时无数据</tr></td></tbody></table></td></tr></table></div>    <span onmouseover="javascript:ShowContent('div3_2');" onmouseout="javascript:HideContent('div3_2');" > F05446R/M</span><div id="div3_2" style="display:none;position:relative;" onmouseout="javascript:HideContent('div3_2');"><table border="1" width="100px"  height="100px" bgcolor="#FF0000"><tr><td><table class="white_size12" bgcolor="#2B5691"><tbody><tr><td>暂时无数据</tr></td></tbody></table></td></tr></table></div>    </span>

                                            </td><td>

                                                <span id="ctl00_cphContent_GridView1_ctl04_Label1">11/11/2008 至 11/11/2010</span>

                                            </td><td>

                                                <a id="ctl00_cphContent_GridView1_ctl04_HyperLink1" href="ShopPromotionDetail.aspx?content=3">详情</a>

                                            </td>

		</tr><tr>

			<td>ccc</td><td>

                                                <span id="ctl00_cphContent_GridView1_ctl05_Label2"><span onmouseover="javascript:ShowContent('div4_0');" onmouseout="javascript:HideContent('div4_0');" >F05441R</span><div id="div4_0" style="display:none;position:relative;" onmouseout="javascript:HideContent('div4_0');"><table border="1" width="100px"  height="100px" bgcolor="#FF0000"><tr><td><div><div>商品名称<nobr>RMB1800.00</nobr></div></div><div>货品原价<nobr>RMB1800.00</nobr></div><div>重量<nobr>0.0098 </nobr></div><div><input type="button" value="推荐客户"  onclick="linkloction('F05441R')" /></div></td></tr></table></div>    <span onmouseover="javascript:ShowContent('div4_1');" onmouseout="javascript:HideContent('div4_1');" > F05466R</span><div id="div4_1" style="display:none;position:relative;" onmouseout="javascript:HideContent('div4_1');"><table border="1" width="100px"  height="100px" bgcolor="#FF0000"><tr><td><table class="white_size12" bgcolor="#2B5691"><tbody><tr><td>暂时无数据</tr></td></tbody></table></td></tr></table></div>    <span onmouseover="javascript:ShowContent('div4_2');" onmouseout="javascript:HideContent('div4_2');" > F05446R/M</span><div id="div4_2" style="display:none;position:relative;" onmouseout="javascript:HideContent('div4_2');"><table border="1" width="100px"  height="100px" bgcolor="#FF0000"><tr><td><table class="white_size12" bgcolor="#2B5691"><tbody><tr><td>暂时无数据</tr></td></tbody></table></td></tr></table></div>    </span>

                                            </td><td>

                                                <span id="ctl00_cphContent_GridView1_ctl05_Label1">11/11/2008 至 11/11/2010</span>

                                            </td><td>

                                                <a id="ctl00_cphContent_GridView1_ctl05_HyperLink1" href="ShopPromotionDetail.aspx?content=4">详情</a>

                                            </td>

		</tr>

	</table>

</div>

</body>
koukoujiayi 2010-08-27
  • 打赏
  • 举报
 回复
在你的div上仍然要加上onmouseover和onmouseout,例如你的第一行:
<td>10周年</td><td>
<span id="ctl00_cphContent_GridView1_ctl02_Label2"><span onmouseover="javascript:ShowContent('div1_0');" onmouseout="javascript:HideContent('div1_0');" >F05566R</span>
<div id="div1_0" style="display:none;position:relative;" onmouseover="javascript:ShowContent('div1_0');" onmouseout="javascript:HideContent('div1_0');"><table ..................
infim 2010-08-27
  • 打赏
  • 举报
 回复
运行了一下怎么就只有墨绿色？
enderboy520 2010-08-27
  • 打赏
  • 举报
 回复
太惨了 都没人知道
enderboy520 2010-08-27
  • 打赏
  • 举报
 回复
[Quote=引用 6 楼 zmcici 的回复:]
很明显你鼠标放到DIV上就离开了span 标签 调用了HideContent（）事件 DIV就没了
[/Quote]
姐啊 我知道是这样
但是如果不写这个 我想要的效果就实现不了

我需要有悬停的时候显示
但是鼠标离开DIV的时候就消失
我郁闷了
骑猪看海 2010-08-27
  • 打赏
  • 举报
 回复
很明显你鼠标放到DIV上就离开了span 标签 调用了HideContent（）事件 DIV就没了
enderboy520 2010-08-27
  • 打赏
  • 举报
 回复
楼上的各位 我没有那么要强大的功能
其实就是一个小CASE

鼠标悬停 然后在悬停的地方显示一个DIV
但是
我需要的是当鼠标放上那个DIV的时候 那个DIV不能消失

现在的会消失 不知道哪里出了问题。
css鼠标放上div显示文字,使用css在鼠标悬停上显示div文本
我是新来的css和ui设计。 这是这种情况。 我有一个div(divmain)。在divmain里面，我有一个图像和另一个div(sub_div)。有sub_div内的文本，我想显示在鼠标悬停，隐藏，否则使用只是CSS(无javascript/jquery)。 请提出我应该遵循的方法。使用css在鼠标悬停上显示div文本现在我做这样的事情：HTML： Some Text的CSS：.divmain ...
div +css 添加鼠标放上去显示提示文字
有时候我们需要鼠标移到某个div，列表的某行某列或某个按钮上时显示出提示文字，此时 我们只需设置title即可： 效果如图：
css中将鼠标放到一个div上显示出另一个隐藏的div
css中将鼠标放到一个div上显示出另一个隐藏的div
鼠标移动到div上显示子div实现要点
本例实现这样一个效果，当鼠标移动到div元素上时，显示子div，并且鼠标移到子div上子div仍然保持显示。当鼠标移出父子div时子div才又重新隐藏起来。子div显示的时候，重叠在后面其他div上，不能挤压后面其他div。网上找了很多例子没法完全达到这个效果，自己经过各种试验折腾了一天才搞出来，记录下来备忘。 本例使用CSS样式来控制，先贴代码： 无标题文档
实现鼠标放到一个div上显示出另一个隐藏的div
CSS Test Page *{ margin: 0; padding: 0; } .cent{ background:#0CF; height:200px; width:100px; } .cs{ width:1
.NET社区

62,046

社区成员

669,049

社区内容

发帖
与我相关
我的任务
社区描述
.NET技术交流专区
javascript云原生 企业社区
社区管理员
  • ASP.NET
  • .Net开发者社区
  • R小R
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告

.NET 社区是一个围绕开源 .NET 的开放、热情、创新、包容的技术社区。社区致力于为广大 .NET 爱好者提供一个良好的知识共享、协同互助的 .NET 技术交流环境。我们尊重不同意见，支持健康理性的辩论和互动，反对歧视和攻击。

希望和大家一起共同营造一个活跃、友好的社区氛围。

试试用AI创作助手写篇文章吧

+ 用AI写文章