Вот несколько способов добиться изменения изображения при наведении курсора с помощью jQuery:

Метод 1. Использование CSS и jQuery:
HTML:

<div class="image-container">
  <img src="original-image.jpg" alt="Original Image">
  <img src="hover-image.jpg" alt="Hover Image" class="hover-image">
</div>

CSS:

.hover-image {
  display: none;
}

jQuery:

$(document).ready(function() {
  $('.image-container').hover(function() {
    $(this).find('.hover-image').toggle();
  });
});

Метод 2. Использование свойства CSS background-image и jQuery:
HTML:

<div class="image-container"></div>

CSS:

.image-container {
  width: 200px;
  height: 200px;
  background-image: url('original-image.jpg');
  background-size: cover;
}
.image-container.hover {
  background-image: url('hover-image.jpg');
  /* Add any additional styling for the hover state */
}

jQuery:

$(document).ready(function() {
  $('.image-container').hover(function() {
    $(this).toggleClass('hover');
  });
});

Метод 3. Использование атрибутов данных и jQuery:
HTML:

<div class="image-container">
  <img src="original-image.jpg" alt="Original Image" data-hover="hover-image.jpg">
</div>

jQuery:

$(document).ready(function() {
  $('.image-container img').hover(function() {
    $(this).attr('src', $(this).data('hover'));
  }, function() {
    $(this).attr('src', $(this).attr('src'));
  });
});

Метод 4. Использование эффекта затухания:
HTML:

<div class="image-container">
  <img src="original-image.jpg" alt="Original Image">
  <img src="hover-image.jpg" alt="Hover Image" class="hover-image">
</div>

CSS:

.hover-image {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  transition: opacity 0.5s ease;
}

jQuery:

$(document).ready(function() {
  $('.image-container').hover(function() {
    $(this).find('.hover-image').fadeToggle(500);
  });
});