0

前のボタンと次のボタンの画像のボタンとホバー効果の画像を設定する方法、ボタンの画像の設定方法がわからない、前と次のボタンの画像のホバー効果有効な状態での状態と画像の不透明度0.5もホバー効果0.5です。私を助けてください。サンプルコードを参照してください：http：//jsfiddle.net/YHXFp/50/

html

<div id="prevnexts">
    <button class="navButs" id="prevs">Prev</button>
    <button class="navButs" id="nexts">Next</button>
</div>

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");
        }
    });  
});
4

2 に答える 2

0

画像を配置すると、Webページの読み込みが遅くなるため、良い方法ではありません。CSSの方が優れています。これがCSSコードと作業フィドル です（私は任意の色を選択しました。希望の色を選択してください）。画像の場合は、に置き換えbackground-colorてbackground-image:url(www.example.com/myimage.png)ください。

#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;
}
于 2012-07-04T19:30:09.130 に答える
0 
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);
}

デモ。 </ p>

于 2012-07-04T19:38:30.797 に答える