jquery - 使用 jQuery 交换图像

Question

我想为菜单中的某些图像添加翻转效果。

菜单当前是一个样式化的无序列表。

<ul id="myMenu">
  <li> <a href=""><img src="apple_faded.gif"></a></li>
  <li> <a href=""><img src="banana_faded.gif"></a></li>
</ul>

该列表是通过循环动态生成的。我想做的是当我将鼠标悬停在这个 <li> 上时从图像名称中删除“_faded”部分并用 jQuery 来做。

我知道这是可能的，只是不知道如何。

<小时/>

更新:

这是可行的解决方案:

$("#myMenu li").mouseover(function(){
    var image = $(this).find("img");
    image.attr("src", image.attr("src").replace("_faded", ""));
}).mouseout(function(){
    var image = $(this).find("img");
    image.attr("src", image.attr("src").replace(".gif", "_faded.gif"));
});

Answer 1

并非万无一失，但这里有一个 jQuery 解决方案。

$('#myMenu li').hover(function() {
  var image = $(this).find('img:eq(0)');
  image.src = image.src.replace('_faded', '');
}, function() {
  var image = $(this).find('img:eq(0)');
  image.src = image.src.replace('.gif', '_faded.gif').;
});

您确实知道也可以使用 CSS 做到这一点吗？只需删除您的图像，提供菜单项 ID，您就可以在 <li> 上设置背景图像。 s:

#myMenu li#apple       { background: url('apple_faded.gif'); }
#myMenu li#apple:hover { background: url('apple.gif'); }

/* Do the same for the other elements */