Question

我有一个应该如此简单的快速问题。我有一个包含4列的表格，每个表格都有一个标签，而标签又包含<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位相同，后者又与img src上的鼠标悬停相同，但是悬停在img src上的情况也是如此。

非常感谢您的帮助。感谢

Answer 1

content属性只能应用于伪元素。相反，请在background-image上使用div：

div[alt="Link1"]{
    background-image: url("http://images/Link1.png");
}
div[alt="Link1"]:hover {
    background-image: url("http://Link1Pressed.png");
}

Answer 2

在您的问题中概述的解决方案仅在其为伪元素时才有效。您需要在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';
});

在悬停时更改图像src

2 个答案: