jQuery событие наведения мыши на изображение. Совет?

Question

Я новичок в jQuery. Я пытаюсь добавить событие наведения мыши на изображение, которое изменяет изображение, и событие наведения мыши, которое возвращает изображение в исходное состояние.

У меня есть изображение

<div id="enter">
    <img src="images/entersite.png"/>
</div>

и некоторый код jQuery

$("#enter").mouseover(function(){
  $("#enter").html("<img src='images/entersitehover.png'/>");
});
$("#enter").mouseout(function(){
  $("#enter").html("<img src='images/entersite.png'/>");
});

Я хочу добавить событие в элемент изображения, а не в div. Я читал что-то вроде $(:last:image), чтобы выбрать последнее изображение (так как это последнее изображение, я думал, что это будет работать).

Любая помощь будет отличной?

Или, если вы можете указать мне достойный учебник, я выучу сам?

Answer 1

Вы можете сделать это очень просто с помощью функции hover, которая имеет два аргумента: функцию для mouseenter и одну для mouseleave.Вы также можете выбрать элемент img в #enter, используя селектор потомков.

Наконец, вы можете напрямую установить свойство src элемента img.

$('#enter img').hover(function(){
    this.src = "images/entersitehover.png";
}, function(){
    this.src = "images/entersite.png";
});