如何将悬停放在< img src ="">标签？ [英] How to put hover on <img src=""> tag?

问题描述

我有一些困惑，我希望悬停在图片< img> 标签上，而不使用background-image。所以，当用户尝试鼠标悬停时，图像将会改变。
我该怎么做？
Thanks。

解决方案

1。内嵌JavaScript版本

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

这个引用当前的 img tag

2。 CSS版本（推荐）

CSS

  a.logo {
 display：block; 
 width：100px; 
 height：100px; 
 background：url（/path/to/logo.png）no-repeat center center; 
 background-size：包含; 
} 
 
 a.logo：hover {
 background-image：url（/path/to/logo-hover.png）; 
 
  

HTML

 < a href =＃class =logo>< / a> 
  

通过使用css，您可以获得更多灵活性，即使在JavaScript禁用的环境中也可以工作。 p>

3。 JavaScript处理程序

在高级情况下有用

  var img = document。的getElementById（ 'myImg'）; 
 
 img.onmouseout = function（）{
 this.src ='b.jpg'; 
}; 
 
 img.onmouseover = function（）{
 this.src ='a.jpg'; 
}; 
  

I have some confusions, I want to put hover on image <img> tag without using "background-image". So that when user try to mouseover, the image will be change. How can i do this? Thanks.

解决方案

1. Inline JavaScript version

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

this refer to the current img tag

2. CSS Version (recommended)

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>

By using css, you get more flexibility and it will work even on JavaScript-Disabled environments.

3. JavaScript handler

Useful on advanced situations

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

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

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

这篇关于如何将悬停放在< img src ="">标签？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！