<html>
<head>
<script src="jquery-1.9.1.min.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
$("a").each(function() {
$(this).mouseover(function() {
$(this).next("div").css("left", function() {
return $(this).prev("a").offset().left - $(this).width();
});
$(this).next("div").css("top", function() {
return $(this).prev("a").offset().top;
})
var str = "";
str += "<div style=\'color:red;\'><ul style=\'width:100%; margin-left:0;\'><li style=\'float:left; width:50%;\'>11</li><li style=\'float:left; width:30%;\'>33</li><li style=\'float:left; width:15%;\'>55</li></ul></div/>";
str += "<div style=\'color:blue;\'><ul style=\'width:100%; margin-left:0;\'><li style=\'float:left; width:50%;\'>22</li><li style=\'float:left; width:30%;\'>44</li><li style=\'float:left; width:15%;\'>66</li></ul></div/>";
$("a").each(function() {
$(this).next("div").html(str);
});
$(this).next("div").toggle();
});
$(this).mouseout(function() {
var id = $(this).prev("input[type=\'hidden\']").prev("input[type=\'hidden\']").val();
$(this).next("div").toggle();
});
});
});
</script>
</head>
<body>
<div>
<div style="width:900px;float:left;">
test tooltip
</div>
<div style="float:left;">
<table>
<tr><td>
<a>1111111</a>
<div style="position: absolute; top: 200; left: 300; display: none; width: 560; height: auto;
background-color: yellow; color: Black; border: solid black 1px;" id="floatDIV">
</div>
</td></tr>
<tr><td>
<a>2222222</a>
<div style="position: absolute; top: 200; left: 300; display: none; width: 560; height: auto;
background-color: yellow; color: Black; border: solid black 1px;" id="floatDIV">
</div>
</td></tr>
</table>
</div>
</div>
</body>
</html>
相关文章：
- Eclipse 悬浮提示 2021-10-31
- html5悬浮球效果 2021-12-09
- CSS+JS 悬浮固定菜单效果 2021-12-06
- div悬浮 - yangzailu 2021-11-02
- CSS3悬浮动画效果 2021-12-25
- html5 悬浮提示框 2021-12-09
- HTML： 简单的悬停效果 2021-12-09
- vc++实现悬浮窗，迅雷360悬浮球效果 2021-08-12