将鼠标悬停在 asp:ImageButton 上时更改标签的值

Question

在我的欢迎页面上，有一系列 6 asp:ImageButton 的。当悬停在上面时，图像将交换以创建通过使用两个单独的图像从灰色变为橙色的效果。我对那部分进行了编码，并且工作起来很有魅力。

现在，对于这次冒险的第二部分，我有两个标签，一个是标题，一个是描述。这些将是空白的，直到用户将鼠标悬停在其中一个按钮上，然后标题标签应对应于页面的标题，描述标签应对应于页面的描述。当用户将鼠标悬停在按钮外时，按钮将变回灰色，标签变为不可见或空白。

这是我当前状态下的其中一个按钮的代码格式：

ASP

中的按钮

<asp:ImageButton ID="imgContact" runat="server" CssClass="tiles" ImageUrl="~/images/inContact.png" />

隐藏在Page_Load事件处理程序中的C#代码

imgContact.Attributes.Add("onmouseover", "this.src='images/acContact.png'");
            imgContact.Attributes.Add("onmouseout", "this.src='images/inContact.png'");

要在该页面中使用的标签是 lblTitle 和 lblDescription。我曾尝试使用 Page_Load 事件中的 if 语句来执行此操作，但我在那里运气不佳，尤其是在尝试使用我认为是 OnMouseOver 的难以捉摸的事件处理程序时，但事实并非如此似乎是我正在寻找的东西，因为每当我尝试使用它或类似的东西时它都会产生错误。

我想尽可能避免 JavaScript 并为此坚持使用 C#。我应该从哪里开始？提前致谢！

Answer 1

这是您想要实现的目标。

将此添加到您的 aspx 页面：

<asp:TextBox ID="TextBox1" runat="server" Enabled="false" Text="title label" CssClass="TitleLabel"></asp:TextBox>
<asp:TextBox ID="DescriptionLabel" runat="server" CssClass="DecriptionLabel" Text="description label"></asp:TextBox>

并更改后面的代码

imgContact.Attributes.Add("onmouseover", "this.src='images/acContact.png';document.getElementsByClassName('TitleLabel')[0].value='first title';document.getElementsByClassName('DecriptionLabel')[0].value='first description'");
imgContact.Attributes.Add("onmouseout", "this.src='images/inContact.png';document.getElementsByClassName('TitleLabel')[0].value='title label';document.getElementsByClassName('DecriptionLabel')[0].value='description label'");

你说你不想用javascript而是用imgContact.Attributes函数添加onmouseover 和 onmouseout 您正在将 javascript 添加到网页 :) 查看网页的源代码以查看生成的代码的外观。我的回答将解决您的问题，但请尝试了解它是如何工作的。玩得开心;)

将鼠标悬停在 asp:ImageButton 上时更改标签的值

Change Value of a label when hovering over asp:ImageButton

c#

asp.net