Стиль изменения CSS CSS после нажатия

Question

Мне было интересно, есть ли способ изменить стиль кнопки, в css, после того, как он был нажат, а не element:active. Спасибо!

Answer 1

Если вы ищете чистую опцию css, попробуйте использовать псевдо-класс: focus.

#style { 
    background-color: red; 
} 

#style:focus {  
    background-color:yellow;  
} 

Answer 2

Это возможно сделать с помощью CSS только путем выбора активного и фокусного псевдоэлемента кнопки.

button:active{ 
    background:olive; 
} 

button:focus{ 
    background:olive; 
} 

См codepen: http://codepen.io/fennefoss/pen/Bpqdqx

Вы также можете написать простую функцию JQuery щелчок, который изменяет цвет фона.

HTML:

<button class="js-click">Click me!</button> 

CSS:

button { 
    background: none; 
} 

JavaScript:

$(".js-click").click(function() { 
    $(".js-click").css('background', 'green'); 
    }); 

Проверить эту codepen: http://codepen.io/fennefoss/pen/pRxrVG

Answer 3

Что такое код вашей, но т? Если это тег, то вы можете сделать это:

a { 
 
    padding: 5px; 
 
    background: green; 
 
} 
 
a:visited { 
 
    background: red; 
 
}

<a href="#">A button</a>

Или вы могли бы использовать JQuery добавить класс по щелчку, как показано ниже:

$("#button").click(function() { 
 
    $("#button").addClass('button-clicked'); 
 
});

.button-clicked { 
 
    background: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="button">Button</button>

Answer 4

Если ваша кнопка будет <a> элемент, вы можете использовать :visited селектор.

Вы ограничены, однако, вы можете изменить только:

• цвет
• цвет фона
• границы окраски (и его подсвойства)
• план-цвет
• цветные части свойств заливки и хода

У меня нет читайте this article about revisiting the :visited, но, возможно, некоторые более умные люди нашли больше способов взломать его.

Answer 5

Каждое звено имеет пять различных состояний: link, hover, active, focused и visited.

Link нормальный внешний вид, hover когда вы мышь над, active это состояние, когда он нажал, focused следующим активным и visited это состояние вы в конечном итоге, когда вы unfocus недавно нажал ссылку.

Я предполагаю, что вы хотите достичь другой стиль на любой focus или visited, то вы можете добавить следующий CSS:

a { color: #00c; } 
a:visited { #ccc; } 
a:focused { #cc0; } 

Рекомендуемый порядок в вашем CSS не вызывает каких-либо проблем заключается в следующем :

a 
a:visited { ... } 
a:focused { ... } 
a:hover { ... } 
a:active { ... } 

Вы можете использовать инструменты разработки вашего веб-браузера, чтобы заставить состояния элемента, как это (хромирование> Developer Tools/Осмотреть element-> Стиль-> Фильтр: Ов): Force state in Chrome Developer Tools