HTML MouseOver 和 MouseOut 错误答案

【问题标题】：HTML MouseOver and MouseOut ErrorHTML MouseOver 和 MouseOut 错误
【发布时间】：2013-08-06 06:06:30
【问题描述】：

<tr>
<td> <span id="dummy" onclick="playSound(this,'vowels/ear.mp3');">
<img src="pics/ie.jpg" onmouseover="this.src='pics/dipthongs/ear.jpg';this.width=200;this.height=250" onmouseout="this.src='pics/ie.jpg';this.width=100;this.height=150"/>
</span> </td>

我的问题是当我加载页面时图像变得如此之大。我必须将鼠标悬停在所有图像上，然后才能恢复到我为它们声明的大小。谢谢！

【问题讨论】：

标签： html mouseover mouseout

【解决方案1】：

为图像添加一个类以固定宽度和高度参数。

<img src="/image.png" class="image1" />

现在 CSS 使用 min-width/height 和 max-width/height:

.image1 {
max-width: 500px;
max-height:500px;
min-width: 120px;
min-height: 120px;
 }

创建函数

function mouseEffect(ele,image,className){
 ele.src=image;
 ele.className= className;
 }

例子：

http://jsfiddle.net/mwtjt/

【讨论】：

虽然，一般来说，这是个好建议……但它并不能远程解决问题。
它本可以清楚地解决它；）我会更新我的答案，以便更好地说明。
@Quentin 我通过解决图像问题更新了我的答案，因为我忽略了 OP 所要求的其余部分：) 我认为我看到了所有内联函数并为 OP 修复了它。
@EasyBB 我尝试了上面的代码，但图像仍然需要悬停才能恢复到原始大小。
@user2217076 您能否通过 jsbin.com 或 jsfiddle.net 提供一个示例，因为它不应该这样做，除非您设置了内联宽度和高度或你有一个 img {} 类，其 width 属性覆盖了上述内容。

【解决方案2】：

不要在 HTML 本身中设置宽度。使用 CSS 设置宽度。不要设置它会正确缩放的高度。

HTML

<img class="styleImage" src="x.jpg">

CSS

img.styleImage {width:75%; -ms-interpolation-mode:bicubic;}

【讨论】：

这不会让它们加载得更快。
也不需要在类前面添加 img ，因为该类分别用于图像本身。所以.styleImage 可以单独工作，只有 span 和 div td tr 等等应该放在前面，我几乎不会这样做，除非它是 span 和 div（因为我讨厌表）span.class 和 div.class