Как наложить курсор на тег <img src="">?

У меня есть некоторые недоумения, я хочу поместить наведите на изображение <img> без использования "background-image". Таким образом, когда пользователь пытается навести указатель мыши, изображение будет изменено. Как я могу это сделать? Спасибо.

Ответ 1

1. Версия встроенного JavaScript

<img src="a.jpg" onmouseover="this.src='b.jpg'" onmouseout="this.src='a.jpg'" />

this ссылаются на текущий тег img

2. Версия CSS (рекомендуется)

CSS

a.logo {
  display:block;
  width: 100px;
  height: 100px;
  background: url(/path/to/logo.png) no-repeat center center;
  background-size: contain;
}

a.logo:hover {
  background-image: url(/path/to/logo-hover.png);
}

HTML

<a href="#" class="logo"></a>

Используя css, вы получите большую гибкость, и он будет работать даже в средах с отключенным JavaScript.

3. Обработчик JavaScript

Полезно в сложных ситуациях

var img = document.getElementById('myImg');

img.onmouseout = function () {
   this.src = 'b.jpg';
};

img.onmouseover = function () {
   this.src = 'a.jpg';
};

Ответ 2

Встроенная версия: <img src="original.jpg" onmouseover="this.src='hover.jpg';" onmouseout="this.src='original.jpg';" />

Ответ 3

$(function() {
  $("img")
    .mouseover(function() { 
        var src = $(this).attr("src").match(/[^\.]+/) + "over.gif";
        $(this).attr("src", src);
    })
    .mouseout(function() {
        var src = $(this).attr("src").replace("over", "");
        $(this).attr("src", src);
    });
 });

Чтобы настроить готовность:

Ответ 4

img:hover {
  background: url("https://i.stack.imgur.com/7KXRp.jpg");
  /* padding: [image-height] [image-width] 0 0 */
  padding: 200px 200px 0 0;
  width: 0;
  height: 0;
}

<img src="https://i.stack.imgur.com/9OcHP.jpg" />