Javascript CSS精灵-如何使悬停按钮处于按下状态_Javascript_Html_Css_Css Sprites_Sprite

Javascript CSS精灵-如何使悬停按钮处于按下状态

javascript html css

Javascript CSS精灵-如何使悬停按钮处于按下状态,javascript,html,css,css-sprites,sprite,Javascript,Html,Css,Css Sprites,Sprite,具有三种不同状态的CSS精灵（按钮）：标准盘旋按下（激活）目前“标准”、“悬停”和“按下”工作。问题是，“按下”仅在按住鼠标时保持按下状态。我希望“按下”或“活动”状态保持活动状态，直到再次单击为止。有什么想法吗？CSS解决方案？javascript解决方案谢谢你的帮助， D 代码如下： <html> <style type="text/css"> a.button { background-image: url('BUTTON SP

具有三种不同状态的CSS精灵（按钮）：

标准

盘旋

按下（激活）

目前“标准”、“悬停”和“按下”工作。问题是，“按下”仅在按住鼠标时保持按下状态。我希望“按下”或“活动”状态保持活动状态，直到再次单击为止。有什么想法吗？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、 钮扣{
背景图像：url（“按钮精灵图像”）；
宽度：86px；
高度：130像素；
显示：块；
文本缩进：-9999px；
}
a、 按钮：悬停{
背景位置：0-130px；
}
a、 micbutton:活动{
背景位置：0-260px；
}

添加活动类：

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 on click函数添加活动类，并在第二次单击时删除类。我相信这就是你想要的

谢谢大家的帮助-非常棒。它最终成为新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>


$（文档）.ready（函数（）{
$（'.button'）。单击（函数（）{
$（this）.toggleClass（'button'）.toggleClass（'button1'）.toggleClass（'active'）；
});   
});
a、 钮扣{
背景图像：url（“按钮精灵图像”）；
宽度：86px；
高度：130像素；
显示：块；
文本缩进：-9999px；
}
a、 按钮：悬停{
背景位置：0-130px；
}
a、 按钮：活动，a.active{
背景位置：0-260px；
}
a、 按钮1：活动{
背景位置：0-260px；
}

离开

：在离开元素或松开鼠标按钮后，仅使用CSS无法悬停或：激活。您必须添加一个JavaScript单击事件以保持活动样式，并处理第二次单击以再次禁用它+1以获得正确的解决方案和我将要编写的内容：-）
<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>