Question

有没有办法（使用javascript / jQuery）执行以下操作：

在我的页面上，我有一个输入类型=文本。此输入的右侧有背景图像。

<input id="my-input" type="text" value="foobar" style="background-image:url(path/to/my/image.gif); background-position:right center; background-repeat:no-repeat; height:17px; width:97px;"/>

当光标移过背景图像（宽度：21px）时，光标图标应设置为指针。否则它应该是cursor：text。

我必须使用输入！我无法在此图标的输入旁边创建新的div！

我试图像这样解决这个问题：

$('#my-input').mousemove(function (event) {
    this.style.cursor = ((event.offsetX || event.layerX) < this.offsetWidth - 21) ? "text" : "pointer";
});

但这不起作用。 this.offsetWidth - 21具有正确的值，但event.layerX和event.offsetX未定义。

你有另外一个想法，如何解决这个问题？你能告诉我，为什么我的js不会像我希望的那样工作？

Answer 1

我试过这种方式和它的工作（在IE上测试）。查看here。

$('#my-input').mousemove(function (event) { 

  $(this).css("cursor", ((event.offsetX || event.layerX) < this.offsetWidth - 21) ? "text" : "pointer");

 });

Answer 2

鼠标位置是我一直在查找的问题之一。这是一个solution。特别注意，中途是一个片段，显示如何确定相对于所讨论对象的左上角的鼠标位置（例如文本字段）。这可能与解决您的问题有关。

也许以下内容可行

$('#my-input').mousemove(function(e) {
    var pos = e.pageX - this.offsetLeft;
    this.style.cursor = (pos < this.offsetWidth - 21) ? 'text' : 'pointer';
});

一个输入 - 两种风格？左侧光标：文本，右侧光标：指针？

2 个答案: