javascript - 悬停事件上的图像

Question

这是我所拥有的：

.error
{
background: url(error.jpg) no-repeat right top;
}

并通过 JQuery 我将“错误”类提供或带入文本框。因此，文本框将图像作为背景，但不是整个文本框，而只是其右侧部分。我现在要做的是悬停在图像（而不是文本框）上以显示图像的标题。如何为图像添加标题以及如何使其悬停事件？

Answer 1

因为图像是输入背景的一部分，所以不能将事件附加到它。

但是，您可以在其本身上放置一个alt或title属性，input这将在所有浏览器中充当工具提示。

Answer 2

对于悬停，您可以使用：

$('#myElement').hover( function () {/*in focus code */},
                       function () {/*out of focus code*/});

要确定是否只有该图像已悬停，您需要附加到 mousemove 事件并在元素上方获取鼠标坐标并自行解决。我会在元素的每个 mousemove 事件之后存储当前鼠标坐标，然后在悬停函数中确定您是否在图像区域内。

var currentMousePos;
$('#myElement').mousemove(function (event) {
  currentMousePos = {(event.pageX - $('#myElement').left), 
                     (event.pageY - $('#myElement').top)};
});