У меня есть элемент изображения, который я хочу изменить при нажатии.
<img id="btnLeft">
Это работает:
#btnLeft:hover {
width:70px;
height:74px;
}
Но то, что мне нужно, это:
#btnLeft:onclick {
width:70px;
height:74px;
}
Но это не работает, очевидно. Возможно ли вообще иметь поведение onclick в CSS (т.е. без использования JavaScript)?
Ближе всего вы получите :active:
#btnLeft:active {
width: 70px;
height: 74px;
}
Однако это применит только стиль, когда кнопка мыши удерживается нажатой. Единственный способ применить стиль и сохранить его в onclick - это использовать немного JavaScript.
Лучший способ (на самом деле единственный способ *) имитировать фактическое событие нажатия, используя только CSS (вместо простого наведения на элемент или создания элемента активным, когда у вас нет mouseUp), - использовать хак с флажком. Он работает, прикрепляя label к элементу <input type="checkbox"> через атрибут label for="".
Эта функция имеет широкую поддержку браузера (псевдокласс :checked IE9+).
Примените одно и то же значение к атрибуту идентификатора <input> и к сопутствующему атрибуту <label> for="", и вы можете указать браузеру изменить стиль метки при нажатии с помощью псевдокласса :checked благодаря тому факту, что щелкнув метку, вы отметите и снимите флажок "связанный" <input type="checkbox">.
* Вы можете смоделировать "выбранное" событие с помощью псевдокласса :active или :focus в IE7+ (например, для кнопки, 50px которой обычно составляет 50px, вы можете изменить ее ширину, когда active: #btnControl:active { width: 75px; }), но это не настоящие события "щелчка". Они "живы" все время, когда элемент выбран (например, с помощью Tab с помощью клавиатуры), что немного отличается от события истинного щелчка, которое запускает действие, обычно - mouseUp.
label {
display: block;
background: lightgrey;
width: 100px;
height: 100px;
}
#demo:checked + label {
background: blue;
color: white;
}<input type="checkbox" id="demo"/>
<label for="demo">I'm a square. Click me.</label>Вы можете использовать псевдокласс :target, чтобы имитировать событие нажатия, приведу пример.
#something {
display: none;
}
#something:target {
display: block;
}<a href="#something">Show</a>
<div id="something">Bingo!</div>Если вы дадите элементу a tabindex, вы можете использовать псевдокласс p :focus для моделирования щелчка.
HTML
<img id="btnLeft" tabindex="0" src="http://placehold.it/250x100" />
CSS
#btnLeft:focus{
width:70px;
height:74px;
}
Edit: Answered до того, как OP выяснил, чего он хочет. Ниже приведен пример onclick, подобный javascripts onclick, а не псевдокласс :active.
Это может быть достигнуто только с помощью Javascript или Checkbox Hack
Флажок checkbox позволяет вам щелкнуть по метке, которая "проверяет" флажок, позволяя вам стилизовать ярлык по своему усмотрению.
Демо
TylerH сделал действительно хороший ответ, и мне просто нужно было обновить последнюю версию кнопки.
#btnControl {
display: none;
}
.btn {
width: 60px;
height: 30px;
background: silver;
border-radius: 5px;
padding: 1px 3px;
box-shadow: 1px 1px 1px #000;
display: block;
text-align: center;
background-image: linear-gradient(to bottom, #f4f5f5, #dfdddd);
font-family: arial;
font-size: 12px;
line-height:30px;
}
.btn:hover {
background-image: linear-gradient(to bottom, #c3e3fa, #a5defb);
}
.btn:active {
margin: 1px 1px 0;
box-shadow: -1px -1px 1px #000;
background-image: linear-gradient(to top, #f4f5f5, #dfdddd);
}
#btnControl:checked + label {
width: 70px;
height: 74px;
line-height: 74px;
}<input type="checkbox" id="btnControl"/>
<label class="btn" for="btnControl">Click me!</label>Как насчет чистого решения CSS без хакерства?
.page {
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
background-color: #121519;
color: whitesmoke;
}
.controls {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
width: 100%;
}
.arrow {
cursor: pointer;
transition: filter 0.3s ease 0.3s;
}
.arrow:active {
filter: drop-shadow(0 0 0 steelblue);
transition: filter 0s;
}<body class="page">
<div class="controls">
<div class="arrow">
<img src="https://i.imgur.com/JGUoNfS.png" />
</div>
</div>
</body>Хорошо, это, возможно, старое сообщение... но было первым результатом в google и решил сделать свой собственный микс на этом, как..
СРОЧНО Я ИСПОЛЬЗУЮ FOCUS
Причиной этого является то, что он отлично работает для примера, который я показываю, если кто-то хочет событие типа мыши вниз, используйте active
КОД HTML:
<button class="mdT mdI1" ></button>
<button class="mdT mdI2" ></button>
<button class="mdT mdI3" ></button>
<button class="mdT mdI4" ></button>
КОД CSS:
/* Change Button Size/Border/BG Color And Align To Middle */
.mdT {
width:96px;
height:96px;
border:0px;
outline:0;
vertical-align:middle;
background-color:#AAAAAA;
}
.mdT:focus {
width:256px;
height:256px;
}
/* Change Images Depending On Focus */
.mdI1 { background-image:url('http://placehold.it/96x96/AAAAAA&text=img1'); }
.mdI1:focus { background-image:url('http://placehold.it/256x256/555555&text=Image+1'); }
.mdI2 { background-image:url('http://placehold.it/96x96/AAAAAA&text=img2'); }
.mdI2:focus { background-image:url('http://placehold.it/256x256/555555&text=Image+2'); }
.mdI3 { background-image:url('http://placehold.it/96x96/AAAAAA&text=img3'); }
.mdI3:focus { background-image:url('http://placehold.it/256x256/555555&text=Image+3'); }
.mdI4 { background-image:url('http://placehold.it/96x96/AAAAAA&text=img4'); }
.mdI4:focus { background-image:url('http://placehold.it/256x256/555555&text=Image+4'); }
JS FIDDLE LINK: http://jsfiddle.net/00wwkjux/
Итак, почему я размещаю это в старом потоке, так как примеры здесь меняются, и я подумал о том, чтобы вернуть его сообществу, которое является рабочим примером.
Как уже ответил создатель потока, они хотят, чтобы эффект продолжался во время события click. Теперь, пока это не точно для этой потребности, его закрытие. активный будет анимировать, пока мышь не будет нажата, и любые изменения, которые вам нужно сделать дольше, должны выполняться с помощью javascript.
Предупреждение! Особенно простой ответ ниже! :)
Вы действительно можете иметь изменения, которые сохраняются (например, блок/всплывающее окно, которое появляется и остается видимым после щелчка) только с CSS (и без использования хака с флажками), несмотря на то, что многие из (в противном случае правильные) ответы здесь утверждают, если вам нужно только настойчивость во время наведения.
Итак, взгляните на ответы Bojangles и TylerH, если они вам подходят, но если вы хотите получить простой и CSS-ответ, который оставит блок видимым после нажатия (и даже может заставить блок исчезнуть при последующем щелчке), затем увидеть это решение.
У меня была похожая ситуация, мне нужно было всплывающее окно div с onClick, где я не мог добавить JS или изменить разметку /HTML (настоящее решение CSS), и это возможно с некоторыми предостережениями. Вы не можете использовать трюк: target, который может создать приятное всплывающее окно, если вы не можете изменить HTML (чтобы добавить 'id'), чтобы его не было.
В моем случае всплывающий элемент div содержался внутри другого элемента div, и я хотел, чтобы всплывающее окно отображалось поверх другого элемента div, и это можно сделать с помощью комбинации: active и: hover:
/* Outer div - needs to be relative so we can use absolute positioning */
.clickToShowInfo {
position: relative;
}
/* When clicking outer div, make inner div visible */
.clickToShowInfo:active .info { display: block; }
/* And hold by staying visible on hover */
.info:hover {
display: block;
}
/* General settings for popup */
.info {
position: absolute;
top: -5;
display: none;
z-index: 100;
background-color: white;
width: 200px;
height: 200px;
}
Пример (а также тот, который позволяет щелкнуть всплывающее окно, чтобы оно исчезло) по адресу:
http://davesource.com/Solutions/20150324.CSS-Only-Click-to-Popup-Div/
Я также вставил приведенный ниже пример фрагмента кода, но расположение в изолированной программной среде stackoverflow странное, поэтому мне пришлось поместить текст "click here" после innerDiv, который обычно не требуется.
/* Outer div - needs to be relative so we can use absolute positioning */
.clickToShowInfo {
position: relative;
}
/* When clicking outer div, make inner div visible */
.clickToShowInfo:active .info { visibility: visible; }
/* And hold by staying visible on hover */
.info:hover {
visibility: visible;
}
/* General settings for popup */
.info {
position: absolute;
top: -10;
visibility: hidden;
z-index: 100;
background-color: white;
box-shadow: 5px 5px 2px #aaa;
border: 1px solid grey;
padding: 8px;
width: 220px;
height: 200px;
}
/* If we want clicking on the popup to close, use this */
.info:active {
visibility: hidden; /* Doesn't work because DCEvent is :active as well */
height: 0px;
width: 0px;
left: -1000px;
top: -1000px;
}<p />
<div class="clickToShowInfo">
<div class="info">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
</div>
Click here to show info
</div>
<p />У меня есть приведенный ниже код для наведения мыши и щелчка мыши, и он работает:
//For Mouse Hover
.thumbnail:hover span{ /*CSS for enlarged image*/
visibility: visible;
text-align:center;
vertical-align:middle;
height: 70%;
width: 80%;
top:auto;
left: 10%;
}
и этот код скрывает изображение, когда вы нажимаете на него:
.thumbnail:active span {
visibility: hidden;
}
У меня возникла проблема с элементом, который должен был быть окрашен в RED при наведении и быть ГОЛУБОЙ при щелчке, когда он зависает. Чтобы добиться этого с помощью css, вам нужно, например:
h1:hover { color: red; }
h1:active { color: blue; }
<h1>This is a heading.</h1>
Я боролся в течение некоторого времени, пока не обнаружил, что порядок селекторов CSS был проблемой, с которой я столкнулся. Проблема заключалась в том, что я переключил места, и активный селектор не работал. Затем я узнал, что :hover сначала :hover а затем :active.
Не с реальным css. Вы можете использовать активный, как все остальные здесь сказали или вы используете checkbox/radio hacks, но я бы не рекомендовал его, потому что он ограничивался братьями и сестрами.
Говоря, очевидно, что есть действительно классный плагин POSTcss, который позволяет вам писать:
.menu a:click {
color: red;
@action toggle-class("active");
}
и это будет соответствовать javascript:
$(function() {
$(".menu a").on("click", function () {
$(this).css({
"color", "red"
}).toggleClass("active");
});
$(".menu a").on("click", function () {
$(this).next().show(1000);
});
$(".menu a").on("click", function () {
$('.item').slideToggle();
});
});
Вы можете использовать: цель
для общей цели
: цель
или фильтр по имени класса
.classname: мишень
или фильтр по имени
#idname: мишень
<style>
#id01:target {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.msg{
display:none;
}
.close{
color:white;
width: 2rem;
height: 2rem;
background-color: black;
text-align:center;
margin:20px;
}
</style>
<a href="#id01">Open</a>
<div id="id01" class="msg">
<a href="" class="close">×</a>
<p>Some text. Some text. Some text.</p>
<p>Some text. Some text. Some text.</p>
</div>