CSS精灵-如何让鼠标悬停按钮处于按下状态

CSS Sprites - How to leave Hover button in depressed state

本文关键字：按钮 悬停 于按下 状态 鼠标 精灵 CSS      更新时间：2023-09-26

三种不同状态的CSS精灵(按钮):

  3. 压(主动)

目前"标准"，"悬停"answers"按下"工作。问题在于，"Pressed"只有在按住鼠标时才会保持按下状态。我希望"按下"或"活动"状态保持活动状态，直到再次单击它。什么好主意吗?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>

添加活动类:

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>

添加活动类正确。在单击时使用toggleClass函数添加活动类，并在第二次单击时删除类。我相信这就是你要找的。

小提琴

$(function() {
    $('.button').click(function() {
        $(this).toggleClass('active');
    });    
});

感谢大家的帮助-太棒了。它最终是一个新的CSS类和javascript的组合。这个新代码允许上面提到的3种状态(正常，悬停，按下)。当再次点击"Pressed"状态时，(sprites)按钮将回到其正常状态。

下面是最后的代码: 
<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>
相关文章：