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

Question

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

Dav*_*ips 7 html javascript css css-sprites sprite

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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Dav*_*ips 1

感谢大家的帮助——太棒了。它最终成为新 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>

Run Code Online (Sandbox Code Playgroud)

归档时间：	14 年，3 月前
查看次数：	6446 次
最近记录：	14 年，3 月前