Question

我在页面中有一个图像，在该图像的“onmouseover”事件中，我将调用JavaScript函数来显示工具提示，在图像的“onmouseout”中，我将调用一个隐藏工具提示的方法。现在我发现当我将光标放在图像上时，它会调用方法来显示工具提示div。

如果我在图像中移动鼠标，它会调用onmouseout事件（即使我不在图像之外）。我怎么能阻止这个？我希望在光标不在图像时调用onmouseout。有什么想法吗？

以下是我的称呼方式：

 <img src="images/customer.png" onmouseout="HideCustomerInfo()" onmouseover="ShowCustomerInfo(485)" />

在我的JavaScript中：

 function ShowCustomerInfo(id) {


 var currentCustomer = $("#hdnCustomerId").val();   
 if (currentCustomer != id) { // to stop making an ajax call everytime when the mouse move on the same image

     $.get('../Lib/handlers/userhandler.aspx?mode=custinfo&cid=' + id, function (data) {
         strHtml = data;
     });

     tooltip.show(strHtml);   // method in another jquery pluggin
     $("#hdnCustomerId").val(id);
 }
}

function HideCustomerInfo() {

 tooltip.hide();    // method in another jquery pluggin
 $("#hdnCustomerId").val(0); //setting in a hidden variable in the page

 }

Answer 1

我假设你正在捣乱你的工具提示？并且工具提示的标记在图像范围之外？

因此，通过鼠标悬停在工具提示上，您在技术上会离开图像。我有类似的事情发生在我身上。

为了解决这个问题，尝试在图像周围粘贴一个div，然后将鼠标放在div上，然后作为div的子元素有你的工具提示，所以即使你把鼠标放在工具提示上，你也是还在div里面。

这可能有效。

Answer 2

如果你用来悬停的图像有透明度（它是一个png，右边），那么当你将鼠标移到图像的透明部分上时，你会得到一个onmouseout事件。是的，它糟透了。我有同样的问题，但还没有优雅的解决方案。

Answer 3

您确定图片的HideCustomerInfo()事件处理程序调用了onmouseout吗？另外，你有什么浏览器？你是否在一个特定的浏览器中得到这种行为？

Answer 4

解决此问题的另一种简便方法是在工具提示上设置pointer-events: none

onmouseout当我将光标移动到元素上而不离开元素时调用JavaScript事件

4 个答案: