在鼠标悬停上更改图片 [英] change image on mouseover

问题描述

现在，当用户在图片上移动鼠标时，我想要一个图片将图片换成其他图片。

离开图片区域后，旧图片应该再次显示。

我该如何做到这一点？一个没有使用javascript的版本将会是最好的。

感谢您的提前支持！

解决方案

当您将鼠标悬停在某个元素上时，您可以使用CSS来更改元素的背景图像。 hover 伪类在最近的浏览器中被大多数元素所支持，但为了向后兼容（Internet Explorer 6），您需要使用 hover 即可工作。

链接中的onclick事件只是让您点击它而没有任何反应，它与盘旋效应做。如果你喜欢，你当然可以点击图片。

HTML：

 < a href =＃id =pictureonclick =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）; 
} 
  

I've got a simple html/css page, where I show a picture.

Now when the user moves the mouse on the picture, I'd like to swap out the picture to some other image.
Upon leaving the image area the old picture should be shown again.

How can I achieve this? A version which works without javascript would be best.

Thanks in advance!

解决方案

You can use CSS to change the background image of an element when you hover over it. The hover pseudo-class is supported on most elements in recent browsers, but to be backwards compatible (Internet Explorer 6), you need to use an anchor tag for hover to work.

The onclick event in the link is just so that nothing happens if you click it, it has nothing with the hovering effect to do. You can of course do something when the image is clicked, if you like.

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);
}

这篇关于在鼠标悬停上更改图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！