CSS精灵-如何让Hover按钮处于抑郁状态
CSS精灵-如何让Hover按钮处于抑郁状态
提问于 2011-07-25 22:53:20
具有三种不同状态的CSS Sprites (按钮)：
- 标准
- 悬停
- 按下(活动)
目前“标准”、"Hover“和”按下“工作。问题是，“按压”只在鼠标按住时保持按住。我希望“按下”或“活动”状态保持活动状态，直到再次单击。有什么想法吗？CSS解决方案？javascript解决方案？
谢谢你的帮助，D
下面是代码：
<html>
<style type="text/css">
a.button {
background-image: url('BUTTON SPRITES IMAGE');
width: 86px;
height: 130px;
display: block;
text-indent: -9999px;
}
a.micbutton:hover {
background-position: 0 -130px;
}
a.micbutton:active {
background-position: 0 -260px;
}
</style>
<a class="button" href="#" ></a>
</html>回答 3
Stack Overflow用户
回答已采纳
发布于 2011-07-26 08:38:12
谢谢大家的帮助-太棒了。最后，它是新的CSS类和javascript的组合。这个新代码允许上面提到的三个状态(正常的，哈弗的，按下的)。当再次单击“按下”状态时，(精灵)按钮将显示为其正常状态。
以下是最终代码：
<html>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.button').click(function() {
$(this).toggleClass('button').toggleClass('button1').toggleClass('active');
});
});
</script>
<style type="text/css">
a.button {
background-image: url('BUTTON SPRITES IMAGE');
width: 86px;
height: 130px;
display: block;
text-indent: -9999px;
}
a.button:hover {
background-position: 0 -130px;
}
a.button:active, a.active {
background-position: 0 -260px;
}
a.button1:active {
background-position: 0 -260px;
}
</style>
<a class="button" href="#" ></a>
</html>Stack Overflow用户
发布于 2011-07-25 22:56:30
添加一个活动类：
a.button {
background-image: url('BUTTON SPRITES IMAGE');
width: 86px;
height: 130px;
display: block;
text-indent: -9999px;
}
a.button:hover {
background-position: 0 -130px;
}
a.button:active, a.active {
background-position: 0 -260px;
}然后，当按钮处于活动状态时，只需添加类：
<a class="button active" href="#" ></a>Stack Overflow用户
发布于 2011-07-25 23:09:54
添加一个活动类是正确的。使用toggleClass on click函数，在第二次单击时添加活动类并删除类。我相信这就是你想要的。
小提琴
$(function() {
$('.button').click(function() {
$(this).toggleClass('active');
});
}); 页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/6823370
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号