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

【问题标题】：One Input - two styles? Left side cursor:text, right side cursor:pointer?一个输入 - 两种风格？左侧光标：文本，右侧光标：指针？
【发布时间】：2010-07-08 06:02:47
【问题描述】：

有没有办法（使用 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 不能按我想要的那样工作吗？

【问题讨论】：

在 Chrome jsfiddle.net/LVG7S 上测试和工作
哇，它可以在 Chrome 和 Firefox 和 IE 中运行。那么，有什么问题呢？
eventObject.offsetX/Y 不是跨浏览器。

标签： javascript jquery html css

【解决方案1】：

我尝试过这种方式及其工作方式（在 IE 上测试）。查看here。

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

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

 });

【讨论】：

你是对的。这是有效的。所以，我必须在我的其他代码中查找我的错误。

【解决方案2】：

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

也许像下面这样的东西会起作用

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

【讨论】：