如何设置按钮图像和上一个和下一个按钮图像的悬停效果?我不知道如何为按钮设置图像,以及如何为上一个和下一个按钮图像设置悬停效果。我需要图像不透明度 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");
}
});
});
最佳答案
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);
}
关于javascript - 如何为按钮设置图像和为图像设置悬停效果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11334474/