如何在 jQuery 中实现鼠标悬停时更换 <td> 元素中图像的方法？

Question

您可以在此处查看实现情况http://jsfiddle.net/xNSFA/ 目前，当您将鼠标悬停在单元格上时，它会更改某些特征。但是图像不会更改。只有当您专门将鼠标悬停在图像上时，图像才会更改。

我如何使图像随其他内容一起更改？

顺便说一句，这不一定要用jQuery完成。如果有一种漂亮优雅的方法可以在CSS中完成这个过程，那就太好了。但是我认为这是不可能的，因为涉及到图像处理，而且我不想将背景设置为该图像。我希望图像在单元格内部。

谢谢。

- marcamillion

---

我没有注意到你不想使用背景图片。你仍然可以用CSS来实现，但需要改变标记以包含两个图像。不确定这是否对你是可接受的解决方案。无论如何，我已经编辑了我的答案。 - user113716

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 的方式（虽然速度较慢，但有些人更喜欢...我会选择上面的方法）：

$("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');
  });
});

- Nick Craver

---

我用了上面那个。谢谢。但是有一个问题，你说的“jQuery-ish”的方式是什么？是纯Javascript的方式吗？但是如果我没记错的话，$()是jQuery的ready()选择器吧？只是想知道为什么你做了两个版本，因为据我所知，上面那个也使用了jQuery选择器。 - marcamillion

@marcamillion - 我的意思是jquery-ish，就像以一致的方式访问所有属性（例如.attr()），这当然不是必需的...也不是我首选，我希望尽可能高效的访问; 在那里你无法打败DOM属性。 - Nick Craver

啊...我明白了。好的，很酷。这就是我想的，但只是想确认一下。谢谢。附言：我同意你的观点，更喜欢DOM属性。在我看来，更优雅和更快。 - marcamillion

Answer 2

新回答：我没有注意到您不想使用背景图片。它可以在没有背景图片的情况下完成，但您需要加载两个图像。

示例：http://jsfiddle.net/patrick_dw/xNSFA/7/

html

<td>
    <span class="sit-in-the-corner">1</span>
    <img class="on" src="http://fiwishop.com/feedback/images/2-up-icon-blk.png" />
    <img class="off" src="http://fiwishop.com/feedback/images/2-up-icon-grey.png" />
</td>

css

table td img.off{
    display:none;
}
table td:hover img.off{
    display:inline;
}
table td:hover img.on{
    display:none;
}

---

Translated:

我会使用CSS而不是Javascript，但是您需要将<img>元素更改为<a>元素，并使用background-属性。

示例：http://jsfiddle.net/patrick_dw/xNSFA/5/

html

<td>
    <span class="sit-in-the-corner">1</span>
    <a class='image'></a>
</td>

css

table td a.image {
    width: 100%;
    height: 100%;
    background-image:url(http://fiwishop.com/feedback/images/2-up-icon-blk.png);
    background-repeat:no-repeat;
    background-position: center center;
    display:block;
}
table td a.image:hover {
    background-image:url(http://fiwishop.com/feedback/images/2-up-icon-grey.png);
}

- user113716

---

你应该注意到这个布局的行为不同了，因为它现在需要<a>来填充整个单元格，而不是像<img>那样只填充图像大小的区域。插入其他内容以查看我的意思。 - Nick Craver

@Nick：当然这取决于标记。更改可能会改变它。如果不需要IE6支持，我会将background-image放在<td>上。如果需要IE6支持，另一种可能性是在<a>上使用absolute定位。无论如何，如果可能的话，我会使用CSS。 - user113716

Answer 3

td:hover img {
     //css attributes to change
}

或者改变源代码

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

图片源无法通过CSS更改，但您可以更改背景图像或背景位置。

- Ben

---

你的代码会出现几个问题，this.src 是 <td> 的 src，但是它不存在，而且 jQuery 对象也没有 src 属性 :) - Nick Craver

Answer 4

以下代码应该可以正常工作：

$('td').hover(
  function(){
    $(this).find('img').attr('src','path/to/new/image.png');
  },
  function(){
    $(this).find('img').attr('src','path/too/old/image.png');
  }
);

- David Thomas

Answer 5

你的脚本有两个问题。首先，你需要将悬停事件附加到<td>而不是<img>本身。如果你运行测试，你会发现当离开实际图像时，图像确实会改变。其次，你似乎颠倒了替换的顺序，所以图像首先在你离开悬停区域时改变。 这是一个已经应用了这两个更改的版本。我认为这就是你想要的效果吧？

- Ben Blank