CSS на мыши вниз

Question

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

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

Эффективно хочу:

Mouse Down: Div становится зеленым

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

Mouse Down: Div становится красным

Mouse Up: Div остается красным

Вместо:

Mouse Down: Div становится зеленым

Mouse Up: Div становится красным

Answer 1

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

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

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

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.

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>

Answer 4

Изменить класс при нажатии на объект

var classes = [
    "myClass1",
    "myClass2"
];
var i = 0;
function classChange(e) {
    e.setAttribute("class", classes[i]);
    i = i == 0 ? i = 1 : i = 0;
}

Если вы хотите, чтобы оно изменилось при mousedown и наведении мыши, используйте:

function mouseDown(e) {
    e.classList.remove("mouseup");
    e.classList.remove("mousedown");
    if (e.hasAttribute("class")) {
        e.setAttribute("class", e.getAttribute("class") + " mousedown");
    } else {
        e.setAttribute("class", "mousedown");
    }
}

function mouseUp(e) {
    e.classList.remove("mouseup");
    e.classList.remove("mousedown");
    if (e.hasAttribute("class")) {
        e.setAttribute("class", e.getAttribute("class") + " mouseup");
    } else {
        e.setAttribute("class", "mousedown");
    }
}

//you change selector if you want another class name
var selector = document.getElementsByClassName("onmousechange");
for (var i = 0; i <= selector.length; i++) {
    selector[i].setAttribute("onmouseup", "mouseUp(this)");
    selector[i].setAttribute("onmousedown", "mouseDown(this)");
}

HTML И CSS также одинаковы для обоих кодов JavaScrirpt

Чистый CSS3

.mousedown,
.myClass1 {
    background: #0a0;
}

.mouseup,
.myClass2 {
    background: #a00;
}

Чистый HTML5

//onclick="classChange(this)"
//class="onmousechange"
<div>
    <p>paragraph</p>
</div>

Мне лень писать какую-либо информацию.

Answer 5

Насколько мне известно, не существует чистого способа 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 (что является достойной перспективой).