logo标签列表

CSS Sprites - 如何使鼠标悬停按钮处于按下状态

javascripthtmlcsscss-spritessprite
7
使用三种不同状态的CSS Sprites（按钮）：
  1. 标准
  2. 悬停
  3. 按下（活动）
目前，“标准”、“悬停”和“按下”都可以正常工作。问题是，“按下”只在鼠标按住时保持按下状态。我想让“按下”或活动状态一直保持活动状态，直到再次单击它。有什么建议？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
仅使用 CSS 无法实现在离开元素或松开鼠标按钮后保持 :hover 或 :active 样式，您需要添加 JavaScript 单击事件来维护“激活”样式，并处理第二次点击以再次禁用它。 - andyb
3个回答
2

添加一个活动类：

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

添加一个活动类是正确的。使用toggleClass在点击函数上添加活动类并在第二次点击时移除类。我相信这就是你想要的。

Fiddle

$(function() {
    $('.button').click(function() {
        $(this).toggleClass('active');
    });    
});
+1 对于正确的解决方案，我也要写这个 :-) - andyb
1

感谢大家的帮助 - 真是太棒了。最终解决方案是结合新的CSS类和JavaScript编写的。这段新代码允许三种状态（正常、悬停、按下）。当再次点击“按下”状态时，(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>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接