<分区>
标签 javascript html css image
<分区>
我有一个应该如此简单的快速问题。我有一个有 4 列的表，在每一列中我都有一个 Tag，它又包含一个 <img> .我正在寻找一种在 css 或 javascript 中可以在鼠标悬停时更改 img 的 src 的方法。
例如，其中一行看起来像这样:
<td><a href="http://link1/"><img alt="Link1" src="http://images/Link1.png/" /></a></td>
我目前拥有的 CSS 是:
img[alt="Link1"]:hover {
content:url("http://Link1Pressed.png");
}
现在这在 chrome 中工作得很好，但在 Firefox 和 IE 中，它在鼠标悬停时什么都不做，我该怎么做才能纠正这个问题？对于我拥有的 40 个按钮，特别是因为名称都是传统的，有没有更好的方法来做到这一点。 IE，链接是 alt 的小写版本，它与图像 src 的前 .png 位相同，而图像 src 又与悬停在 img src 上相同，但事实上悬停在 img src 上也已按下.
非常感谢您的帮助。谢谢
最佳答案
您问题中概述的解决方案仅在它是伪元素时才有效。您需要将其设为 a 或 td 上的背景图像并以这种方式进行更改，或者使用这样的 jQuery 函数:
$('a').on('mouseover', function() {
$(this).find('img').attr('src', 'path/to/my/image.png');
});
或原生 JavaScript
document.querySelectorAll('a img[alt=Link1]').addEventListener('mouseover', function() {
this.src = 'path/to/my/image.png';
});
关于javascript - 悬停时更改图像 src，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27156483/