鼠标滑过按钮显示详细信息

最新推荐文章于 2022-12-28 15:23:51 发布

maji9370

最新推荐文章于 2022-12-28 15:23:51 发布

阅读量2.7k

点赞数

分类专栏： JavaScript&amp;CSS .NET 文章标签： button javascript div server border xhtml

本文链接：https://blog.csdn.net/maji9370/article/details/5701994

版权

.NET 同时被 2 个专栏收录

47 篇文章 0 订阅

订阅专栏

JavaScript&CSS

14 篇文章 0 订阅

订阅专栏

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default7.aspx.cs" Inherits="Default7" %>

<!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>
function showdiv(div){
div.className='divshow';
div.style.left=event.x+document.body.scrollLeft-div.width-5;
div.style.top=event.y+document.body.scrollTop+20;
}

</script>
<style type="text/css">
    .titlediv {
font-family: "Verdana", "Arial", "Helvetica", "sans-serif";
font-size: 12px;
font-weight: normal;
word-break:break-all;
filter: Alpha(Opacity=80, FinishOpacity=30, Style=1, StartX=1, StartY=1, FinishX=100, FinishY=100);
}
.divshow {
display: block;
position:absolute;
width:150px; z-index:1
}
.divhidden {
display: none;
position:absolute;
width:150px; z-index:1
}
</style>
</head>
<body>
    <form id="form1" runat="server">
                           <asp:Button ID="Button2" runat="server" Text="Button" OnClick="Button2_Click" οnmοusemοve="javascript:showdiv(div1);" οnmοuseοut="javascript:div1.className='divhidden';" />
                   <div id="div1" class="divhidden" width="200">
        <table width="200" border="1" cellpadding="5" cellspacing="0" bordercolor="#666666"
            bgcolor="#e9e9e9" class="titlediv" style="border-collapse: collapse">
            <tr>
                <td bgcolor="#f1f1f1">
                    显示标题
                </td>
            </tr>
            <tr>
                <td>
                    <table width="100%" border="0" cellspacing="0" cellpadding="0">
                        <tr>
                            <td>
                                显示的内容
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </div>
    </form>
</body>
</html>