<div style="position:absolute;display:none" id="tipDiv"><div style="position:relative;top:18px;background-color:red;">aaa</div></div>
<a href="#" onmouseover="this.insertAdjacentElement('afterBegin',tipDiv);tipDiv.style.display='';" onmouseout="tipDiv.style.display='none';" >link1</a>
<a href="#" onmouseover="this.insertAdjacentElement('afterBegin',tipDiv);tipDiv.style.display='';" onmouseout="tipDiv.style.display='none';" >link1</a>
<a href="#" onmouseover="this.insertAdjacentElement('afterBegin',tipDiv);tipDiv.style.display='';" onmouseout="tipDiv.style.display='none';" >link1</a>
<a href="#" onmouseover="this.insertAdjacentElement('afterBegin',tipDiv);tipDiv.style.display='';" onmouseout="tipDiv.style.display='none';" >link1</a>
<a href="#" onmouseover="this.insertAdjacentElement('afterBegin',tipDiv);tipDiv.style.display='';" onmouseout="tipDiv.style.display='none';" >link1</a>
<a href="#" onmouseover="this.insertAdjacentElement('afterBegin',tipDiv);tipDiv.style.display='';" onmouseout="tipDiv.style.display='none';" >link1</a>
<a href="#" onmouseover="this.insertAdjacentElement('afterBegin',tipDiv);tipDiv.style.display='';" onmouseout="tipDiv.style.display='none';" >link1</a>
<a href="#" onmouseover="this.insertAdjacentElement('afterBegin',tipDiv);tipDiv.style.display='';" onmouseout="tipDiv.style.display='none';" >link1</a>
<a href="#" onmouseover="this.insertAdjacentElement('afterBegin',tipDiv);tipDiv.style.display='';" onmouseout="tipDiv.style.display='none';" >link1</a>
<a href="#" onmouseover="this.insertAdjacentElement('afterBegin',tipDiv);tipDiv.style.display='';" onmouseout="tipDiv.style.display='none';" >link1</a>
解决方案 »
- 求一段JS代码!能让链接直接调用JS函数达到管理链接地址的目的
- 自动完成如何事先加载数据文件?
- 为什么不设置target="_blank"也能在新窗口打开连接?
- jquery 插件回调函数的问题
- js如何从td中移除一个span?
- 请教大家聚焦form提交的页面,谢谢
- jQuery的$(function(){...})怎么理解
- 请问,如何在页面上加入一段javascript程序,使得页面上的所有连接都在新窗口中打开?
- 如何在 javascript里判断多个checkbox是否有一个没有被选中(因为不能没有选择)?
- 如何实现使js获取错误的时间
- 如何在javascript 函数中使用动态的控件名(内详)
- 乱码问题,在不同JS文件中
这个问题难的地方不是打开菜单,而是关闭菜单.
这对鼠标,链接,菜单之间的边界的判断要求很高.
而且,您的代码在firefox中是无效的.
不是想100%的回答你的问题。
<div style="position:absolute;display:none;width:100px;height:100px;background-color:blue;" id="tipDiv">
<div style="position:relative;top:50px;background-color:red;">aaa</div>
<input type="button" value="关闭" onclick="parentElement.style.display='none'">
</div>
<a href="#" onmouseover="this.insertAdjacentElement('afterBegin',tipDiv);tipDiv.style.display='';" onmouseout="tipDiv.style.display='none';" >link1</a>
<a href="#" onmouseover="this.insertAdjacentElement('afterBegin',tipDiv);tipDiv.style.display='';" onmouseout="tipDiv.style.display='none';" >link1</a>
<a href="#" onmouseover="this.insertAdjacentElement('afterBegin',tipDiv);tipDiv.style.display='';" onmouseout="tipDiv.style.display='none';" >link1</a>
<a href="#" onmouseover="this.insertAdjacentElement('afterBegin',tipDiv);tipDiv.style.display='';" onmouseout="tipDiv.style.display='none';" >link1</a>
<a href="#" onmouseover="this.insertAdjacentElement('afterBegin',tipDiv);tipDiv.style.display='';" onmouseout="tipDiv.style.display='none';" >link1</a>
这个例子的方法挺有意思的,不过,距离要求还是有距离,另外,还是不兼容firefox呀~~
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title></title>
<SCRIPT language=javascript >
function mouseOverFun(obj)
{
var toLi=event.toElement;
if(toLi==obj) return false;
if(toLi.tagName=="A" || toLi.tagName=="UL") toLi=toLi.parentElement;
if(toLi.children[1]) toLi.children[1].style.display="block";
}
function onmouseOutFun(obj)
{
var fromLi=event.fromElement;
var eventToElement=event.toElement;
if(fromLi==obj) return false;
if(fromLi.tagName=="A" || fromLi.tagName=="UL") fromLi=fromLi.parentElement;
if(fromLi.contains(eventToElement)) return false;
if(fromLi.children[1]) fromLi.children[1].style.display="none";
var maxLevel=10;
while( maxLevel-- > 0)
{
fromLi=fromLi.parentElement.parentElement;
if(fromLi.contains(obj) || (fromLi.tagName!="LI" && fromLi.tagName!="TD") || fromLi.contains(eventToElement))
break;
fromLi.children[1].style.display="none";
}
}
</SCRIPT>
<STYLE type="text/css">
* {
FONT: 11px verdana
}
UL {
PADDING: 0px; MARGIN: 0px; WIDTH: 150px; BORDER: #ccc 1px solid; DISPLAY:none; POSITION: absolute; LEFT: 149px; TOP: 0px;
}
LI {
BACKGROUND-COLOR:#ffffff;PADDING: 0px; MARGIN: 0px; WIDTH: 150px; BORDER: #ccc 1px solid; POSITION: relative;
}
TD LI UL {
}
.menuA{
COLOR: #777; TEXT-DECORATION: none; WIDTH:100%; HEIGHT:20px;
}
.menuA:hover {
BACKGROUND: #d9d9f9; COLOR: #e2144a;
}
.menuLevel0{
PADDING: 0px; MARGIN: 0px;WIDTH: 100px; BORDER: #ccc 1px solid; POSITION: relative;
}
.menuLevel1{
LEFT: 0px; TOP: 20px;
}
</STYLE>
<META content="Microsoft FrontPage 4.0" name=GENERATOR></HEAD>
<BODY>
部分代码来自gu1dai(异域苍穹......追夢人):http://community.csdn.net/Expert/topic/4123/4123998.xml?temp=.4086878<br>
<table onmouseover="mouseOverFun(this);" onmouseout="onmouseOutFun(this);" border=0 cellspacing=0 >
<tr>
<td class="menuLevel0">
<A class="menuA" href="#">fasdfdsaf</A>
<UL class="menuLevel1">
<LI>
dfafd <br>
afdsaf
afdaf
</UL>
</td>
</tr>
</table>
</BODY></HTML>
这个是在独钓寒江雪的空间上看到的跟你这个很相似
希望这个能对你又帮助!