Question

CSS Sprites（按钮）有三种不同的状态：

标准
悬停
按下（有效）

目前“标准”，“悬停”和“按下”工作。问题是，“按下”仅在按住鼠标时保持按下状态。我希望“按下”或“活动”状态保持活动状态，直到再次单击它为止。有任何想法吗？ 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>

Answer 1

添加有效课程：

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>

Answer 2

添加活动类是正确的。在单击函数上使用toggleClass会添加活动类，并在第二次单击时删除类。这就是我相信之后的情况。

Fiddle

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

Answer 3

感谢大家的帮助 - 非常棒。它最终成为新的CSS类和javascript的组合。这个新代码允许上面提到的3个状态（正常，悬停，按下）。再次单击“按下”状态时，（精灵）按钮将返回正常状态。

以下是最终代码：

<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>

CSS Sprites - 如何让Hover按钮处于压低状态

3 个答案: