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

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

解决方案 »

  1.   


    <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）
      

  2.   

    这个好使
    <!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>
      

  3.   

    <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>
      

  4.   

    这个放在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>