Javascript如何在悬停到图像时显示消息答案

【问题标题】：Javascript How to show message on hover to imageJavascript如何在悬停到图像时显示消息
【发布时间】：2013-09-20 06:23:02
【问题描述】：

我可以使用以下代码显示图像警告。如果用户名或密码为空。

如果鼠标悬停在警告图像上，我想显示消息。

例如;

“用户名不能为空！”对于用户名和“密码不能为空！”密码。

在哪里编辑以在鼠标悬停到图像时显示消息？

我的 Javascript 代码：

function LoginButonOnclick() {
  var data= {
  UserName: $('#UserNameTextBox').val(),
  Password: $('#PasswordTextBox').val(),
  };
  if (data.UserName== null) {
    $("#showwarning1").html('<img src="~/Image/warning.png">');
  }
  if (data.Password== null) {
    $("#showwarning2").html('<img src="~/Image/warning.png" />');
  }
}

我的 HTML 代码：

<input type="text" id="UsernameTextBox" name="UsernameTextBox"/>
<input type="text" id="PasswordTextBox" name="PasswordTextBox"/>
<input type="button" onclick="LoginButonOnclick()" value="Enter"/>

<div id="showwarning1"></div>
<div id="showwarning2"></div>

【问题讨论】：

标签： javascript jquery image hover mouse

【解决方案1】：

为什么要自己去把事情复杂化......它是如此简单...... 使用<img>标签的title属性来显示鼠标悬停消息！！

<img src="~/Image/warning.png" title="Password is empty!!"/>

【讨论】：

为什么有人会为了一张小纸条做其他任何事情？

【解决方案2】：

您可以使用 onmouseover 属性来调用相同的函数，以便它在悬停时和点击时执行相同的操作。

  function LoginButonOnclick() {
  var data= {
  UserName: $('#UserNameTextBox').val(),
  Password: $('#PasswordTextBox').val(),
  };
  if (data.UserName== null) {
    $("#showwarning1").html('<img src="~/Image/warning.png">');
  }
  if (data.Password== null) {
    $("#showwarning2").html('<img src="~/Image/warning.png" />');
  }
}
<input type="text" id="UsernameTextBox" name="UsernameTextBox"/>
    <input type="text" id="PasswordTextBox" name="PasswordTextBox"/>
    <input type="button" onclick="LoginButonOnclick()" onmouseover="LoginButonOnclick()" value="Enter"/>

    <div id="showwarning1"></div>
    <div id="showwarning2"></div>

或者，您也可以使用 jQuery

【讨论】：

【解决方案3】：

您可以考虑使用 jqueryUI 工具提示小部件。

参考：http://jqueryui.com/tooltip/

或者使用悬停事件：http://api.jquery.com/hover/

【讨论】：

【解决方案4】：

使用 jquery 可以很容易地做到这一点。

http://api.jquery.com/mouseover/

【讨论】：

【解决方案5】：

$(function(){
 $("#showwarning1").on('mouseover', function(){
  //show error message to the user
  console.log("UserName Can Not Be Empty!");

 });

 $("#showwarning2").on('mouseover', function(){
  //show error message to the user
  console.log("Password Can Not Be Empty!");
 });
});

【讨论】：