如何在asp.net c#中显示和隐藏mouseover和mouseout事件的标签

How to display and hide a label on mouseover and mouseout event in asp.net c#

本文关键字：mouseover 隐藏 mouseout 事件 标签 显示 asp net      更新时间：2023-09-26

Wnen我的鼠标在Label1上，我想在它附近显示Label2。然后，当我的鼠标离开Label1时，我想隐藏Label2。我尝试使用以下代码。我的javascript很差。

    <script language="javascript" type="text/javascript">
    function LabelHover()
    {
        document.getElementById('Label1').style.display = 'inherit';
    }
    function Labelleave() 
    {
        document.getElementById("Label1").style.display='none';
    }
    </script>
</head>
<body>
    <asp:Label ID="Label1" runat="server" Text="Hello" Height="120" Width= "120" ForeColor="Brown" style=" left:220px; border:groove; top:15px " >
    </asp:Label>
    <asp:Label ID="Label2" runat="server" Text="Disclaimer" Height="17" Width= "100" ForeColor="Brown" onmouseover="LabelHover()" onmouseout="Labelleave()" style=" left:220px; " >
    </asp:Label>

这是我的javascript:

<script language="javascript" type="text/javascript">
    function LabelHover() {
        document.getElementById('<%= Label1.ClientID%>').style.display = 'inherit';
    }
    function Labelleave() {
        document.getElementById('<%= Label1.ClientID%>').style.display = 'none';
    }
</script>

和标记：

<asp:Label ID="Label1" runat="server" Text="Hello" Height="120" Width= "120" ForeColor="Brown" style=" left:220px; border:groove; top:15px; float:left; " >
</asp:Label>
<asp:Label ID="Label2" runat="server" Text="Disclaimer" Height="17" Width= "100" ForeColor="Brown" onmouseover="LabelHover()" onmouseout="Labelleave()" style=" left:220px;float:left; " >
</asp:Label>

由于要显示或隐藏Label2依赖于Label1，因此必须在Label1而不是Label2 处添加onmouseover（）和onmouseout（）

<asp:Label ID="Label1" runat="server" Text="Hello" Height="120" Width= "120" onmouseover="LabelHover()" onmouseout="Labelleave()" ForeColor="Brown" style=" left:220px; border:groove; top:15px " >
    </asp:Label>
    <asp:Label ID="Label2" runat="server" Text="Disclaimer" Height="17" Width= "100" ForeColor="Brown"  style=" left:220px; " >
    </asp:Label>

Javascript：

<script language="javascript" type="text/javascript">
    function LabelHover() {
        document.getElementById('Label2').style.visibility = 'visible';
    }
    function Labelleave() {
        document.getElementById('Label2').style.visibility = 'hidden';
    }
    </script>
相关文章：