Javascript 如何设置按钮的图像和图像的悬停效果

如何为上一个和下一个按钮图像设置按钮图像和悬停效果，我不知道如何为上一个和下一个按钮图像设置按钮图像和悬停效果。我需要图像不透明度0.1，也需要禁用图像按钮悬停，启用条件下图像不透明度0.5，也需要悬停效果0.5。请帮帮我。请参见示例代码：

html

上
下一个

javascript

$(document).ready(function() {
    var cnt = 1;
    var maxLinkss = 5;
    $("#prevs").attr("disabled","disabled");
    $("#nexts").attr("enabled","enabled");   

    $(".navButs").click(function(){

        if (this.id=="nexts") {
            cnt++;  
            console.log(" + ",cnt);  
        } else {
            cnt--;
            console.log(" - ",cnt);  
        }

        if (cnt<0) cnt=0;

        if (cnt==maxLinkss-1) {
            $("#nexts").attr("disabled","disabled");
        } else {
            $("#nexts").removeAttr("disabled");
        }

        if (cnt==1) {
            $("#prevs").attr("disabled","disabled");
        } else {
            $("#prevs").removeAttr("disabled");
        }
    });  
}); 

$（文档）.ready（函数（）{
var-cnt=1；
var-maxLinkss=5；
$（“#prevs”）.attr（“禁用”、“禁用”）；
$（“#nexts”）.attr（“已启用”、“已启用”）；
$（“.navButs”）。单击（函数（）{
if（this.id==“nexts”）{
cnt++；
console.log（“+”，cnt）；
}否则{
碳纳米管；
console.log（“-”，cnt）；
}
如果（cnt放置图像不是一个好方法，它会减慢网页的加载速度。CSS更好。以下是CSS代码和
（我任意选择了颜色。选择你想要的颜色）。
如果是图像，只需将
背景色
替换为
背景图像：url（www.example.com/myimage.png）


​
 另外，我需要禁用和启用的继续。完全禁用的按钮图像也将悬停在禁用状态。检查，在
jQuery
和
css
中都进行了更改。哇。您的脚本非常好。它工作得很好。但是如果禁用后单击“下一步”按钮，计数将无限增加。为什么？请参阅：并让我知道是否有更改好吧
$(document).ready(function() {
    var cnt = 1;
    var maxLinkss = 5;
    $("#prevs").attr("disabled","disabled");
    $("#nexts").attr("enabled","enabled");   

    $(".navButs").click(function(){

        if (this.id=="nexts") {
            cnt++;  
            console.log(" + ",cnt);  
        } else {
            cnt--;
            console.log(" - ",cnt);  
        }

        if (cnt<0) cnt=0;

        if (cnt==maxLinkss-1) {
            $("#nexts").attr("disabled","disabled");
        } else {
            $("#nexts").removeAttr("disabled");
        }

        if (cnt==1) {
            $("#prevs").attr("disabled","disabled");
        } else {
            $("#prevs").removeAttr("disabled");
        }
    });  
}); 

#prevs{
    background-color:#666;
    color:#000;
}
#prevs:hover{
    background-color:#004534;
}
#prevs:active{
    background-color:red;
}
#nexts{
    background-color:#999;
    color:#000;
}
#nexts:hover{
    background-color:#00fcbe;
}
#nexts:active{
    background-color:blue;
}

button#nexts{
    background:url(your_image_url) no-repeat;
    width:50px;
    height:50px;
    cursor:pointer;
}
button#prevs{
    background:url(your_image_url) no-repeat;
    width:50px;
    height:50px;
    cursor:pointer;
}

button#nexts:hover, button#prevs:hover{
    opacity:.5;
    filter:alpha(opacity=50);
}