在jsp里头当某个元素触发onmouseover时，想要出旁边出现一个浮动div

2012-12-16

在jsp里面当某个元素触发onmouseover时，想要出旁边出现一个浮动div各位大虾帮帮忙，我现在想要实现的功能

在jsp里面当某个元素触发onmouseover时，想要出旁边出现一个浮动div
各位大虾帮帮忙，我现在想要实现的功能是：当某个元素触发onmouseover时，想要在鼠标旁边出现一个浮动div，请问怎么写？给一段简单的代码看看呗！
[最优解释]


<style>
.Nav {

}
.Nav li{
  float:left;
  display:block;
  position:relative;
}
.Nav a{
  float:left;
  display:block;
  position:relative;
  padding:2px 10px 2px 10px;
  font-size:13px;
  text-decoration: none;
}
.Nav li a:hover
{
  color:#ffffff;
  background:#ea0000;
}
.Nav li table {
  display:none;
  border-collapse:collapse; 
}
.Nav li:hover table, .Nav a:hover table {
  display:block;
  position:absolute;
  top:18px;
  left:0;
  background:#ea0000;
}
.Nav li:hover table a, .Nav a:hover table a {
  float:none;
  background:#f2f2f2;
  color:#000;
  width:120px;
  border-bottom:1px solid #fff;
}
.Nav li:hover table a:hover, .Nav a:hover table a:hover {
  background:#565656;
  color:#fff;
}
</style>

<div class='Nav'>
<li>
  <a href='#'>产品
  <table><tr><td>
    <a href='#1'>内容管理系统</a>
    <a href='#2'>竞争情报系统</a>
  </td></tr></table>
  </a>
</li>
<li>
  <a href='#'>客户服务
  <table><tr><td>
    <a href='#1'>技术支持</a>
    <a href='#2'>留言反馈</a>
    <a href='#3'>在线帮助</a>
  </td></tr></table>
  </a>
</li>
</div>

网上拿的，没有用onmouseover，用了伪类（a:hover）
[其他解释]
这个好使

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">

function shows()
{
var f=document.getElementById("f");
f.style.display='block';
}
function closed()
{
var f=document.getElementById("f");

f.style.display='none';
}
</script>
<style type="text/css">
#f{
width:300px;
height:200px;
background: #FF0;
display:none;
letf:500px;
font-size:30px;
}
#m{
width:200px;
height:40px;
background: #F00;
font-size:30px;
}

</style>
</head>
<body>
<div id="m" onmouseover="shows()" onmouseout="closed()">测试一下</div>
<div id="f">显示层</div>

</body>
</html>

[其他解释]



<style> 
 
#float { position:absolute; display:none; }
</style>

<div id="test">鼠标移过来瞧一瞧
<div id="float">我是浮动div</div>
</div>

<script type="text/javascript">
$("#test").mouseover(function() {
$("#float").show();
}).mousemove(function() {
$("#float").css({top:event.clientY+10, left:event.clientX+20})
}).mouseleave(function() {
$("#float").hide();
});
</script>

[其他解释]
这个放在html文件中可以直接打开看效果。

<!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>
<title>鼠标悬停显示提示信息窗口</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<style type="text/css">
.contact{width:100px;height:15px;margin:20px 0 0 50px;background-color:#CCCCCC;text-align:center;}
.us{display:none;width:300px;height:40px;padding:10px;position:relative;top:0px;left:50px;background-color:#0099FF;}
</style>
<script src="http://www.codefans.net/ajaxjs/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".contact").mouseover(function(){
  $(".us").show("slow");
  $(".contact").mouseout(function(){
   $(".us").hide("slow");
  });
});
})
</script>
</head>
<body>
<div class="contact">联系我们</div>
<div class="us">显示内容<br>

显示内容描述</div>
</body>
</html>

[其他解释]
简单省事的话就jquery插件。。。tip
[其他解释]
不就是这个帖子把鼠标移动到头像的那个么

热点排行

Java Web开发

在jsp里头 当某个元素触发onmouseover时，想要出旁边出现一个浮动div

在jsp里头当某个元素触发onmouseover时，想要出旁边出现一个浮动div