jquery - 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)
}

Answer 2

$(document).ready(function(){
    $(".nav").hover(function(){
        var default_button = this.src.replace(".jpg","_hover.jpg");
        $(this).attr('src', default_button) 
    });
});