用于导航的jquery .hover()

Question

我制作导航功能,将导航默认图像更改为悬停图像.

默认图像名称为"main.png",悬停图像为"main_hover.png"

我知道如何通过jquery的帮助从html src属性中提取图像名称,但我知道如何在文件名"main"和文件扩展名".png"之间添加额外的字符串

我的代码到目前为止:

$(document).ready(function(){
    $(".nav").hover(function(){
        var default_button = this.src;
        // here is part where i need help with adding "_hover" to default_image
        $(this).attr('src', default_button) // i know i need this after image is not hovered
    });
});

Answer 1

可能你不应该通过jQuery这样做,为什么不使用css方式？

.nav {
 background: url(/path/to/main.png)
}

.nav:hover {
  background: url(/path/to/main_hover.png)
}