带延伸窗口的超链接

Question

我想实现一个功能，当我鼠标悬浮到某指定项上时，会出现一个小页面，里面有几个超链接，点击超链接跳转到相应的页面。
页面有点像开心网里面察看好友菜地的那种功能。希望代码点拨，谢谢！

Answer 1

就是CSDN用户头像这样吧.. 头像onmouseover事件弹出DIV,document.onmouseover隐藏DIV,并且阻止
头像的onmouseover和DIV的onmouseover事件冒泡.

Answer 2

<style>
ul{
list-style-type: none;
}
ul li{
display: block;
height: 30px;
width: 40px;
background-color: #333366;
}
#odiv {
width:200px;
height:100px;
border: 2px solid #D0D0D0;
background-color:#fff;
position:absolute;
display:none;
}
</style>
<script type="text/javascript">
<!--
 var $ = function(id) { return "string" == typeof id ? document.getElementById(id) : id };
 var CancelBubble = function(e){
var e = e || window.event;
try{
e.cancelBubble = true;
}catch(ex){
try{
e.stopPropagation();
}catch(e){}
}
 } var getTarget = function(e){
return e.srcElement || e.target;
 } var absPosition = function(element){
var iTop = iLeft = 0;
do{
iTop += element.offsetTop;
iLeft += element.offsetLeft;
}while(element = element.offsetParent);
return {'x': iLeft, 'y': iTop};
 }
 function showTip(e){
CancelBubble(e);
var e = e || window.event
var otarget = getTarget(e);
$("odiv").style.display = "block"; with($("odiv").style){
display="block";top=(absPosition(otarget).y + otarget.offsetHeight)+"px";left=absPosition(otarget).x+"px";
}
document.onmouseover = function(){
$("odiv").style.display = "none";
document.onmouseover = null;
}
$("odiv").onmouseover = function(e){
var e = e || window.event;
CancelBubble(e);
} }
//-->
</script>
<ul>
<li onmouseover="showTip(event);"></li>
</ul>
<div id="odiv">
<a href="http://www.baidu.com" target="_blank">baidu</a>
</div>大概的写个,细节自己弄吧

Answer 3

试了下可以，但是我怎么把那个黑框的东西变成文字啊？
像图上的例子，能不能点OFF的时候出现对应窗口和超链接？

Answer 4

<ul>
    <li onmouseover="showTip(event);"> OFF </li>
</ul>
//你可以把你这个表格的那个单元格 绑定这个onmouseover="showTip(event);"事件

Answer 5

#odiv {
    width:200px;
    height:100px;
    border: 2px solid #D0D0D0;
    background-color:#fff;
    position:absolute;
    display:none;
    z-index:100; /*这个css属性加上试下*/
}

Answer 6

if ($status_all[$i] == '1')
echo '<td align="center" bgcolor="#FFFFFF" width="30">&nbsp;</td>';
else
echo '<ul><td align="center" bgcolor="#FFFFFF" width="30"><font color=red><li onmouseover="showTip(event);">OFF</li></font></td></ul>';

Answer 7

现在OFF（红色）前面多了一个红点。

Answer 8

 echo '<td align="center" onmouseover="showTip(event) bgcolor="#FFFFFF" width="30"><font color=red>OFF</font></td>';