[英]how to set image for buttons and hover effect for images
如何為上一個和下一個按鈕圖像設置按鈕圖像和懸停效果? 我不知道如何設置按鈕的圖像,以及上一個和下一個按鈕圖像的懸停效果。 我需要圖像不透明度 0.1 也禁用圖像按鈕懸停,禁用條件。啟用條件下的圖像不透明度 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");
}
});
});
放置圖像不是一個好方法,因為它會減慢網頁的加載速度。 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;
}
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);
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.