Один вход - два стиля? Курсор с левой стороны: текст, курсор с правой стороны: указатель?

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;"/>

Когда курсор перемещается над фоновым изображением (ширина: 21 пикс.), Значок курсора должен быть установлен на указатель. В противном случае это должен быть курсор: текст.

Я должен использовать вход! Я не могу создать новый 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).Проверьте здесь .

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

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

 }); 

Answer 2

Положение мыши - одна из тех проблем, которые я всегда ищу.Вот одно решение .В частности, обратите внимание, что на полпути вниз находится фрагмент кода, показывающий, как определить положение мыши относительно верхнего левого угла рассматриваемого объекта (например, текстового поля).Это может иметь отношение к решению вашей проблемы.

Может быть, что-то вроде следующего будет работать

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