鼠标按下时的CSS效果

Question

通常我会使用:hover，但我希望我的网站也可以在触摸屏上访问。

我知道可以使用 :active，但是一旦我松开鼠标按钮，它就回到了非活动状态。

事实上，我想要的是：

鼠标按下：Div 变绿

鼠标释放：Div 保持绿色

鼠标按下：Div 变红

鼠标释放：Div 保持红色

而不是：

鼠标按下：Div 变绿

鼠标释放：Div 变红

- theorise

---

":active" 是我需要的，因为我不需要移动设备支持。 - Penguin9

Answer 1

不依赖于jQuery：

:active 伪类用于在元素被点击时应用CSS样式。

.button {
  color: red;
}
.button:active {
  color: green;
}

- Jordan Feldstein

---

请记得，如果您还有一个鼠标悬停状态，它需要放在点击状态之前。否则，悬停效果将覆盖点击效果。按钮 { 颜色：红色; } 按钮:hover { 颜色：黄色; } 按钮:active { 颜色：绿色; } - Ems

这不是真的。":active"是应用于活动元素的。当鼠标点击一个元素后，该元素可以成为":active"状态的A元素。 - Oskar

这是一个JSBin的链接：http://jsbin.com/oquzab/1/edit。如你所言，为了避免被:hover、:link和:visited覆盖，必须将:active放在列表的最后一项。 - Shanimal

Answer 2

以下是如何制作纯CSS切换按钮（需要CSS3）：

.toggle-button
{
  background-color: #FF0000;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.toggle-box:checked + .toggle-button
{
  background-color: #00FF00;
}

<input type="checkbox" class="toggle-box" id="toggle-1" />
<label for="toggle-1" class="toggle-button">Click Me</label>

当然，一如既往地，IE在CSS方面失败了（无法理解:checked 伪类），因此最好使用JavaScript。

- zzzzBov

---

值得注意的是，您不能在<label>元素中嵌套<div>或<table>元素，因此JS或:focus(并不完全相同)是唯一的解决方案。 - Andy E

“我不确定我理解了”（http://jsfiddle.net/2RPnR/）... 我想我应该提到JS应该用于控制交互，但是使用HTML和CSS也可以实现一定程度的切换效果。 - zzzzBov

确实，您可以将标签元素放置在<div>或<td>元素中，但这并不完全相同。对于前者，只允许使用短语内容，这意味着没有其他<div>元素。对于后者，通过为每个<td>添加额外的<label>，您会增加标记的数量。尽管如此，您的答案非常有帮助，在大多数其他情况下都很有用。 - Andy E

这在 Firefox 的锚点/链接上对我不起作用，但是对于按钮是可以的。 - gunwin

@Grantunwin，不确定您在引用什么。您能否在jsfiddle上制作一个简化的测试案例？ - zzzzBov

Answer 3

使用jQuery。

$(function(){
    $('#yo-content').click(function() { 
        $(this).toggleClass('make-me-green');
    });
});

CSS（层叠样式表）：

#yo-content { 
    background-color: #ff0000;
    cursor: pointer;
}

.make-me-green { 
    background-color: #33ff00 !important;
}

HTML:

<div id="yo-content">Feel free to click</div>

- racerror

Answer 4

据我所知，没有纯CSS的方法可以实现你想要的效果。

但是jQuery可能会有所帮助...

 // let's suppose your div's (on page load) initial state is red (#F00), 
 // and this flag will stand for it
 var initialState = true; // setup a global state flag
 $("#foo").mousedown( function() { // on mousedown
   $(this).css("background-color", intialState ? "#0F0" : "#F00"); // toggle bgColor
   initialState = !initialState; // toggle flag
 });

如果你想让表现方面尽可能地保持 CSS 中心化（这是一个不错的观点），那么你可以设置/添加/删除类名，而不是设置 CSS 属性。

- Alain BECKER