如何在asp.net中更改鼠标悬停时的标签文本答案

【问题标题】：How to change label text on mouseover in asp.net如何在asp.net中更改鼠标悬停时的标签文本
【发布时间】：2011-12-05 11:46:27
【问题描述】：

在 asp.net 中，当用户将鼠标悬停在按钮上时，我想更改标签的文本以解释按钮的作用。

然后，当他们将鼠标移出按钮时，标签应返回其默认文本。

实现这一目标的最佳方法是什么？有 ASP.net 控件吗？还是我应该只编写自定义 javascript 代码？

【问题讨论】：

你应该纯粹用javascript来处理这个。使用像 jQuery 这样的库将使这样的任务变得相当简单。
@KarmicCoder 不仅应该使用 javascript，我认为这是 他唯一的选择，除非他想通过到处回发来惹恼用户.
@kaes - 检查工具提示选项，否则纯 javascript 是选项。
Javascript 是要走的路。如果这是页面的唯一脚本要求，那么 jQuery 将太昂贵
@iandayman，它会很昂贵，但是鼠标事件在所有事件模型中并不常见，而在 jQuery 中。公平地说，这个功能不会受到这些差异的影响，足以证明使用 jQuery 是合理的。

标签： javascript asp.net user-interface

【解决方案1】：

使用一点 jQuery 魔法改变标签文本真的很容易。

这是您要用于标签的内容

<label id="mylabel" 
       title="My Text" 
       data-replace="My NEW Text">My Text</label>

这就是您要用于 jQuery 的内容

$("#mylabel").mouseover(function () {
  $(this).text($(this).data('replace'));
});


$("#mylabel").mouseout(function () {
  $(this).text($(this).attr('title'));
});

你可以test it here。

另外，如果您正在使用网络表单，您可以在代码后面或直接在控件中添加数据属性。在后面的代码中这样做对动态文本有好处。

mylabel.Attributes.Add("data-original", "My Text");
mylabel.Attributes.Add("data-replace", "My NEW Text");

【讨论】：

【解决方案2】：

[编辑以回答您的问题]

<asp:label id="label1" class="hover" data-replace="The tooltip text #1" data-original="Original Value" runat="server">Original Value</asp:label>

然后：

$(".hover").hover(

function() {
    var text = $(this).attr("data-replace");
    $(this).text(text);
}, function() {
    var text = $(this).attr("data-original");
    $(this).text(text);
}
);

[旧帖子...哎呀，回答错误的问题]

使用像 jQuery Tools Tooltip 插件这样的东西非常棒！

http://flowplayer.org/tools/demos/tooltip/index.html

只需将标题属性添加到您的标签和一些 JavaScript：

<asp:label id="label1" title="The tooltip text #1" runat="server"></asp:label>

然后

$("#label1").tooltip();

【讨论】：

使用工具提示是比更改标签的实际文本更好的选择，但是@kaes 确实要求更改标签的文本。您最好给出一个 jQuery 示例来说明如何做到这一点，以便真正“回答”这个问题。

【解决方案3】：

你可以使用这个解决方案，希望对你有帮助

   myItemLabel.ToolTip = "Text you want to show when hover";

将此与 jQuery Tooltip 插件（或类似插件）结合使用以获得更好的效果。

     myItemLabel.CssClass = "has-tooltip";

然后在你的标记中。

     <script type="text/javascript" src="scripts/jquery-1.3.2.js"></script>
    <script type="text/javascript" src="scripts/jquery.tooltip.js"></script>
    <script type="text/javascript">
    $(function() {
       $('.has-tooltip').tooltip();
      });
     </script>

【讨论】：

您的答案与@Watermark-Studios 的答案相同，遗憾的是它实际上并没有回答如何更改标签文本。

【解决方案4】：

你可以用这个

<script type="text/javascript" src="scripts/jquery-1.3.2.js"></script>
<script type="text/javascript" src="scripts/jquery.tooltip.js"></script>
<script type="text/javascript">
 $(function() {
    $('.has-tooltip').tooltip();
   });
  </script>

【讨论】：