Изменить изображение на MouseOver

StackOverflow https://stackoverflow.com/questions/1468085

  •  13-09-2019
  •  | 
  •  

Вопрос

У меня есть простая страница HTML/CSS, где я показываю картинку.

Теперь, когда пользователь перемещает мышь на картинке, я хотел бы поменять картинку на другое изображение.
Покинув область изображения, старая картина должна быть снова показана.

Как я могу этого добиться? Версия, которая работает без JavaScript, была бы лучшей.

Заранее спасибо!

Это было полезно?

Решение

Вы можете использовать CSS, чтобы изменить фоновое изображение элемента, когда вы колебаетесь над ним. А hover Pseudo-Class поддерживается в большинстве элементов в недавних браузерах, но для того, чтобы быть обратно совместимым (Internet Explorer 6), вам необходимо использовать якорный тег для hover работать.

Событие OnClick в ссылке просто так, что ничего не произойдет, если вы нажимаете на него, оно не имеет ничего общего с парящим эффектом. Вы, конечно, можете сделать что -то, когда изображение нажимается, если хотите.

HTML:

<a href="#" id="picture" onclick="return false;"></a>

CSS:

#picture {
   display: block;
   width: 200px;
   height: 200px;
   background-image: url(firstimage.gif);
   border: none;
   text-decoration: none;
}
#picture:hover {
   background-image: url(hoverimage.gif);
}

Другие советы

Этот кажется довольно кратким и хорошо написанным (примечание: Rollover Solutions CSS не будет работать на IE6.)

<img src="https://pbs.twimg.com/profile_images/677544618326556672/WID2m1_a.png" onmouseout="this.src='https://pbs.twimg.com/profile_images/677544618326556672/WID2m1_a.png'" onmouseover="this.src='https://pbs.twimg.com/profile_images/638751551457103872/KN-NzuRl.png'" alt="image" width="50px" height="50px">

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top