gpt4 book ai didi

javascript - CSS Sprites - 如何让悬停按钮处于按下状态

转载 作者:太空狗 更新时间:2023-10-29 14:16:47 26 4
gpt4 key购买 nike

具有三种不同状态的 CSS Sprites(按钮):

  1. 标准
  2. 悬停
  3. 按下(激活)

目前“标准”、“悬停”和“按下”工作。问题是,“按下”仅在按住鼠标时保持按下状态。我希望“按下”或事件状态保持事件状态,直到再次单击它为止。有任何想法吗? CSS 解决方案? JavaScript 解决方案?

感谢您的帮助,

代码如下:

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

关于javascript - CSS Sprites - 如何让悬停按钮处于按下状态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6823370/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com