Question

我有一个带PNG图标的菜单。我想当用户悬停菜单项时，PNG图标变为GIF图标。我试过这个： jsFiddle

$("#image").mouseenter(function(){
    // I can set GIF url here
    $(this).attr("src","http://jsfiddle.net/img/logo.png");
});

$("#image").mouseleave(function(){
    $(this).attr("src","http://jsfiddle.net/img/logo-white.png");
});

但我知道这不是正确的方法。我无法为每个菜单项执行此操作。这是我的HTML：

<ul>
    <li>
        <a> item 1
        <img src="image-path" />
        </a>
    </li>
    <li>
        <a> item 2
        <img src="image-path" />
        </a>
    </li>
</ul>

我跟着this question，但这不是我想要的。我想在路径的最后.或最后/分开。

此代码在每个/字符上拆分字符串：

var data =$("#image").attr("src");
var array = data.split('/');

问题：

我有这张图片路径：../images/icon1.png我希望将其更改为这些路径：

../images/icon1.gif或../images/hover/icon1.gif

Answer 1

这不需要js。

只需使用css即可完成。

image{background-image:url(../images/icon.png);}
image:hover{background-image:url(../images/icon1.png);}

Answer 2

尝试

$('ul img').hover(function (e) {
    $(this).attr('src', function (idx, src) {
        return src.replace(/(.)(png|gif)$/i, '.' + (e.type == 'mouseenter' ? 'gif': 'png'))
    })
})

演示：Fiddle

Answer 3

只需剪掉最后三个字符：

var oldSrc = this.src;
this.src = oldSrc.substr(0,oldSrc.length-3)+"png";
// or +"gif" to change to the GIF image.

Answer 4

这样做了吗？

$(this).attr('src', 'http://jsfiddle.net/img/logo-white.png');

Answer 5

Hiral是正确的，你不需要JS。

尝试以下方法：

.icon {
    width: 32px; /* Replace with your own */
    height: 32px; /* Replace with your own */
}
.icon-house {
    background-image:url(../images/icon-house.png);
}
.icon-house:hover {
    background-image:url(../images/icon-house-hover.png);
}
.icon-car {
    background-image:url(../images/icon-car.png);
}
.icon-car:hover {
    background-image:url(../images/icon-car-hover.png);
}
/* etc... */

并将您的HTML更改为以下内容：

<ul>
    <li>
        <a href="index.html">Home
        <span class="icon icon-house"></span>
        </a>
    </li>
    <li>
        <a href="carsrock.html">Cars are awesome!
        <span class="icon icon-car"></span>
        </a>
    </li>
</ul>

或者，您可以使用spritesheet，这样可以为用户节省时间，因为他们不需要下载许多单独的小图像。

本文是相关的：http://css-tricks.com/css-sprites/

Answer 6

您可以使用正则表达式替换路径：

var newSrc = $(this).attr("src").replace(/\.png$/, ".gif");
$(this).attr("src", newSrc);

如何在JQuery中拆分字符串？

6 个答案: