请教:鼠标经过单元格,显示一个表格,离开后,自动消失的网页代码

如题所述

是这样吗?
<html>
<head>
<title></title>
<style type="text/css">
#f{display:none;}
</style>
<script type="text/javascript">
function stylejs() {
var here = document.getElementById("here");
var table = document.getElementById("f");
here.onmouseover = function() {
table.style.display = "block";
}
here.onmouseout = function() {
table.style.display = "none";
}
}
window.onload = function() {
stylejs();
}
</script>
</head>
<body>
<span id="here">鼠标经过这里</span>
<table id="f">
<tr>
<td>表哥</td>
<td>表妹</td>
<td>我爱你</td>
</tr>
<tr>
<td>表哥</td>
<td>表妹</td>
<td>我爱你</td>
</tr>
</table>

</body>
</html>
温馨提示:内容为网友见解,仅供参考
第1个回答  2012-05-21
我把楼上的代码改了一下,效果更好。多表格切换。

<html>
<head>
<title></title>
<style type="text/css">
#f{display:none;}
#g{display:none;}
</style>
<script type="text/javascript">
function stylejs() {
var here = document.getElementById("here");
var table = document.getElementById("f");
here.onmouseover = function() {
table.style.display = "block";
table2.style.display = "none";
}
here.onmouseout = function() {
table.style.display = "block";

}
f.onmouseover = function() {
table.style.display = "block";
}
f.onmouseout = function() {
table.style.display = "none";
}

var xxx = document.getElementById("xxx");
var table2 = document.getElementById("g");
xxx.onmouseover = function() {
table2.style.display = "block";
table.style.display = "none";
}
xxx.onmouseout = function() {
table2.style.display = "block";

}
g.onmouseover = function() {
table2.style.display = "block";
}
g.onmouseout = function() {
table2.style.display = "none";
}

}
window.onload = function() {
stylejs();
}
</script>

</head>
<body>
<div align="center">

<table width="355" height="32" border="0" cellpadding="0" cellspacing="0" bgcolor="#99CC00">
<tr>
<td width="148"><span id="here"><div align="center">鼠标经过这里 </div></span></td>
<td width="136"><div id="xxx" align="center">xxxxxxxxxxxx</div></td>
<td width="71"><div align="center">xxxxxxxxx</div></td>
</tr>
</table>
<table border="1" width="355" bgcolor="#FFFF00" id="f">
<tr>
<td><strong>表哥</strong></td>
<td><strong>表妹</strong></td>
<td><strong>我爱你</strong></td>
</tr>
<tr>
<td><strong>表哥</strong></td>
<td><strong>表妹</strong></td>
<td><strong>我爱你</strong></td>
</tr>
</table>
<table border="1" width="355" bgcolor="#FFFF00" id="g">
<tr>
<td><strong>堂哥</strong></td>
<td><strong>堂妹</strong></td>
<td><strong>我爱你</strong></td>
</tr>
<tr>
<td><strong>堂哥</strong></td>
<td><strong>堂妹</strong></td>
<td><strong>我爱你</strong></td>
</tr>
</table>

<p>onmouseover 是移到</p>
<p>onmouseout 是移出</p>
</div>
</body>
</html>

请教:鼠标经过单元格,显示一个表格,离开后,自动消失的网页代码
鼠标经过这里 表哥 表妹 我爱你 表哥 表妹 我爱你

网页特效.当鼠标经过某个链接时自动弹出一个表格显示这个链接的内容,当...
要给框架页面增加新框架,就是像拆分表格的单元格一样,把一个框架分为两个框架。 其操作如下:(1)按住Ctrl键,将鼠标放在框架边框上,当鼠标变为上下箭头时,可把边框拖到一个新位置,当松开鼠标按钮时,一个新的空白内容的框架就形成了。(2)也可以通过命令来操作:首先单击要拆分的框架内部,...

网页制作中,当鼠标经过一个表格时,在这表格的下方,弹出一列表格,这个...
mpmenu1.addItem(new mMenuItem('打开','javascript:alert("打开")','self',false,'打开','','','',''));mpmenu1.addItem(new mMenuItem('保存','javascript:alert("保存")','self',false,'保存','','','',''));mpmenu1.addItem(new mMenuItem(null,null,null,true));mpmenu1.addItem(n...

求网页单元格代码,要求鼠标放上去一种颜色,离开一种颜色


怎么看一个网站的源代码,网页源代码怎么看
第一种:打开一个网页后点击鼠标的右键就会有查看源文件,操作鼠标右键---查看源文件即可弹出一个记事本,而记事本内容就是此网页的html代码。首先打开电脑的ie浏览器进去,如下图所示。进入ie浏览器首页后,点击查看,如下图所示。在查看菜单下选择源,如下图所示。最后打开源就看到本网页的源代码了,...

如何在excel表格里设置鼠标点击后自动跳链接?
1. 首先在要做跳转的单元格中输入链接地址。2. 然后右键点击该单元格,选择“超链接”。3. 在弹出的“超链接”对话框中,选择“已存在的文件或网页”,并在网址栏中输入要跳转的链接地址。4. 确定设置后,该单元格便会变成蓝色下划线,表示已添加超链接。5. 单击该单元格时,便可跳转到相应的链接...

用DW怎样制作网页导航条?鼠标经过的时候和鼠标离开两种背景效果,和两 ...
然后CSS部分加上代码 a {background:blue} 然后 a:hover {background:red} 这样可以实现背景色的转换,如果想要变色的区域不是矩形,那就得准备好原图和激活图了,然后也用 a:hover {background:url()}来实现了,很简单。上面的是一个背景图片 是用js改变样式 鼠标放上来试试 function aa(obj...

excel鼠标经过单元格悬浮显示完整内容
你描述的现象(但贴图上没有鼠标,是否隐藏了?)是Excel的正常功能:鼠标指向超链接单元格时会以悬浮框显示完整的“链接”(可以是完整的链接路径,也可以是代表链接的其他形式文本)。这个链接显示悬浮框好像无法关闭(批注和注释的可以),变通办法:将该单元格的内容从“超链接”改变为直接引用,比如:...

...如何实现在单元格中显示另一张表格数据(鼠标经过时就像显示批注一样...
常规是很难达到你的目的。但你可以通过vba来做到点击该单元格就显示该图表。

...用鼠标单击一个输入着月份的单元格中时,出现一个方块,单击它就出现...
一、直接输入:1.选择要设置的单元格,譬如A1单元格;2.选择菜单栏的“数据”→“有效性”→出现“数据有效性”弹出窗口;3.在“设置”选项中→“有效性条件”→“允许”中选择“序列”→右边的“忽略空值”和“提供下拉菜单”全部打勾→在“来源”下面输入数据,譬如“苹果,柚子,橘子,橙子,香蕉,...

相似回答