鼠标移动到图标上显示半透明窗体

最近要做一个有关网页的项目，就是类似魔兽世界察看装备的设计，例如当你把鼠标移到装备图标上，就会出现一个带有装备信息的半透明的窗口，请问大家这个是用javascript实现的吗 ？http://www.wowarmory.com/search.xml?fl[source]=all&fl[type]=weapons&fl[subTp]=2hswd&searchType=items如果可以请高手发个例子来看看，谢谢了。

解决方案 »

  1.   

    <html>
    <head>
    </head>
    <body>
    这里写的东西你还能看到.
    <div style="top:10px;left:0px;position:absolute;height:100px;width:300px;background-color:yellow;filter: alpha(opacity=50);opacity: 0.5;-moz-opacity: 0.5;">content</div>
    </body>
    </html>
      

  2.   

    要实现鼠标移动效果采用jQuery实现如下：
    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default4.aspx.cs" Inherits="Default4" %><!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 runat="server">
        <title>无标题页</title>
        <script src="Scripts/jquery-1.3.2.js" type="text/javascript"></script>
       <script type ="text/javascript" >
       window .onload =function (event){$("#div1").hide();}
       </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <asp:Image ID="Image1"  runat ="server" src="images/image.1.jpg"  />
            <div id="div1"  runat ="server" style="top:10px;left:0px;position:absolute;height:100px;width:300px;background-color:yellow;filter: alpha(opacity=50);opacity: 0.5;-moz-opacity: 0.5;"  >content</div>
            </div>
        </form>
        <script type ="text/javascript" >
        $("#Image1").bind("mouseover",function (event){$("#div1").show();});
        $("#Image1").bind("mouseout",function (event){$("#div1").hide();});
        </script>
    </body>
    </html>