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>上并使用jQuery执行此操作时，我要做的是从图像名称中删除“_faded”部分。

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

更新：

这是工作解决方案：

$("#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>上设置背景图片：

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

/* Do the same for the other elements */

Answer 2

$('#myMenu img').mouseover(function(){
  $(this).attr('src', $(this).toString().replace('_faded',''));
}).mouseout(function(){
  $(this).attr('src', $(this).toString().replace('.gif','_faded.gif'));
});

我希望这会有所帮助

Answer 3

实际上这很简单。您只需在jQuery中使用hover()方法：

 $('img').hover(function()
 {
     $(this).prop('src', function(i, oldSrc)
     {
         return oldSrc.replace(/_faded/gi, '');
     });
 }, function()
 {
     $(this).prop('src', function(i, oldSrc)
     {
         return oldSrc.replace(/.gif/gi, '_faded.gif');
     });

 });

Answer 4

我认为这将定义帮助：

式：

#menu1 {
background-image: url('apple_faded.gif');
}

#menu2 {
background-image: url('banana_faded.gif');
}

HTML：

<ul id="myMenu">
    <li id="menu1" onmouseover="this.style='background-image: url(apple.gif);'"> </li>
    <li id="menu2" onmouseover="this.style='background-image: url(banana.gif);'"> </li>
</ul>

它不是jQuery，而是JS。

Answer 5

您可以使用字符串拆分，然后使用一些连接。

<body>


    <ul id="myMenu">
            <li><img src="apple_faded.gif"></li>
            <li><img src="banana_faded.gif"></li>
        </ul>
        <script>
        $('li img').mouseover(function(e) {
            var current = $(this);
            var name = current.attr('src');
            var original = name.split('_');
            var swap = original[0];
            var swapname = swap + '.gif';
            //alert(swapname);
            current.attr('src',swapname);
        });
        </script>
        </body>

Answer 6

如果您使用javascript加载列表，您可能希望看到.live（）函数http://api.jquery.com/live/，它会在列表的每个新元素上添加一个事件，例如，

$(".liElement img").live("mouseover", function(event) {
         //Do removal
});

用jQuery交换图像

6 个答案: