CSS на мыши

Обычно я бы использовал: hover, но я хочу, чтобы мой сайт был доступен и на сенсорных экранах.

Я знаю, что могу использовать: active, но как только я отпустил кнопку мыши, он вернется в неактивное состояние.

Фактически я хочу:

Мышь вниз: Div загорается зеленым цветом

Mouse Up: Div остается зеленым

Мышь вниз: Div идет красным цветом

Мышь: Div остается красным

Вместо:

Мышь вниз: Div загорается зеленым цветом

Мышь: Div идет красный

Ответ 1

Вот как сделать чистый css toggle 'button' (требуется 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>

Ответ 2

Не полагаясь на jQuery:

Псевдокласс класса :active используется для применения css к элементам при нажатии на них.

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

Ответ 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>

Ответ 4

Насколько я знаю, нет чистого метода CSS для достижения того, чего вы действительно хотите.

Но jQuery может пригодиться там...

 // let suppose your div (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 (что является достойной перспективой).