jquery - 如何在 img 所在的 悬停时更改图像 - 在 jQuery 中？

Question

你可以在这里看到实现http://jsfiddle.net/xNSFA/

现在，当您将鼠标悬停在单元格上时，它会改变一些特征。但是图像没有改变。只有当您专门将鼠标悬停在图像上时，图像才会发生变化。

如何让图像随着其他所有内容而变化？

顺便说一句，它不必在 jQuery 中完成。如果在 CSS 中有一种优雅的方式来做到这一点，我会很高兴的。但我只是假设这是不可能的 - 因为图像处理，我不想将背景设置为该图像。我想要单元格内的图像。

谢谢。

Answer 1

你可以把 .hover() 在 <td> 上并找到 <img>里面改变，像这样:

$("table td").hover(function() {
  var img = $(this).find("img")[0];
  img.src = img.src.replace('-grey.png', '-blk.png');
}, function() {
  var img = $(this).find("img")[0];
  img.src = img.src.replace('-blk.png', '-grey.png');
});

You can test it out here , 或 jQuery-ish 方式(虽然速度较慢 - 有些人更喜欢它......我会选择上面的方式):

$("table td").hover(function() {
  $(this).find("img").attr("src", function(i, src) {
    return src.replace('-grey.png', '-blk.png'); 
  });
}, function() {
  $(this).find("img").attr("src", function(i, src) {
    return src.replace('-blk.png', '-grey.png');
  });
});