如何更改img所在的<td>悬停时的图像 - 在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');
});

你可以在这里测试它,或者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');
  });
});