クリックで変更したい画像要素があります。
<img id="btnLeft">これは機能します：
#btnLeft:hover {
width:70px;
height:74px;
}しかし、私が必要なのは：
#btnLeft:onclick {
width:70px;
height:74px;
}しかし、それは明らかに機能しません。onclickCSSで（JavaScriptを使用せずに）動作することは可能ですか？
:targetSelectors 4は新しいものではありません。これは、執筆時点ですでに1年間推奨されていたSelectors 3から利用可能になっています。
回答:
あなたが得る最も近いものは:active：
#btnLeft:active {
width: 70px;
height: 74px;
}ただし、これはマウスボタンが押されたときにのみスタイルを適用します。スタイルを適用して onclickを適用し続ける唯一の方法は、JavaScriptを少し使用することです。
CSSのみを使用して実際のクリックイベントをシミュレートする最良の方法（実際には唯一の方法*）（要素にカーソルを合わせるか、要素をアクティブにするのではなく、mouseUpがない場合）は、チェックボックスハックを使用することです。これは、装着することにより動作しますlabelし<input type="checkbox">、ラベルの経由要素for=""の属性。
この機能は幅広いブラウザをサポートしています（:checked疑似クラスはIE9 +です）。
同じ値を<input>のID属性と付随する<label>のfor=""属性に適用します。ラベルをクリックするとラベルがオンに:checkedなり、チェックがオフになるため、ブラウザにクリック時にラベルを擬似クラスで再スタイルするように指示できます。「関連付けられている」<input type="checkbox">。
*あなたが経由して「選択」イベントをシミュレートすることができます:activeか:focusIE7 +（例えば、通常だボタンの中に疑似クラス50pxワイド、あなたがしながら、その幅を変更することができますactive。#btnControl:active { width: 75px; }）が、これらは真実ではないのイベントを「クリック」。要素が選択されている間（TabキーボードでBingを実行するなど）、それらは「ライブ」です。これは、通常、アクションを発生させる実際のクリックイベントとは少し異なりますmouseUp。
ここでは、マークアップの入力の直後にラベルを配置しました。これは、隣接する兄弟セレクター（+キー）を使用して、#demoチェックボックスの直後に続くラベルのみを選択できるようにするためです。以来:checked擬似クラスは、チェックボックスに適用され、#demo:checked + labelチェックボックスがチェックされている場合にのみ適用されます。
#btnControl {
display: none;
}
#btnControl:checked + label > img {
width: 70px;
height: 74px;
}<input type="checkbox" id="btnControl"/>
<label class="btn" for="btnControl"><img src="http://placekitten.com/200/140" id="btnLeft" /></label>ことが言われていると、そこにあるいくつかの悪いニュースが。ラベルは一度に1つのフォームコントロールにのみ関連付けることができるため、ボタンを<label></label>タグ内にドロップして1日だけで呼び出すことはできません。しかし、我々はできるラベルの外観を作成し、どのようにHTMLボタンの外観と振る舞いにかなり近い動作するようにいくつかのCSSを使用します。
このデモのCSSのほとんどは、ラベル要素のスタイル設定のみを目的としています。実際にはボタンが必要なく、古い要素で十分な場合は、上記の2番目のデモと同様に、このデモのほとんどすべてのスタイルを削除できます。
また、そこに1つの接頭辞付きのプロパティがあることに気付くでしょう-moz-outline-radius。しばらく前に、Mozillaはこの素晴らしい仕様外のプロパティをFirefox に追加しましたが、WebKitの人々は残念ながらそれを追加しないことにしました。したがって、Firefoxを使用する人々のためにCSSのそのラインを単に進歩的な拡張と考えてください。
:checked。
疑似クラス:targetを使用してクリックイベントを模倣できます。例を挙げましょう。
#something {
display: none;
}
#something:target {
display: block;
}<a href="#something">Show</a>
<div id="something">Bingo!</div>これは次のようになります。http：//jsfiddle.net/TYhnb/
注意すべき点の1つは、これはハイパーリンクに限定されているため、ボタンなどのハイパーリンク以外で使用する必要がある場合は、ハイパーリンクをボタンのようにスタイリングするなど、少しハックすることをお勧めします。
要素にa tabindexを指定すると、:focus疑似クラスを使用してクリックをシミュレートできます。
HTML
<img id="btnLeft" tabindex="0" src="http://placehold.it/250x100" />CSS
#btnLeft:focus{
width:70px;
height:74px;
}tabindex=-1がアイテムを使用するときはまだフォーカス可能ですが、マウスではなく、キーボードではなく、この場合に適しています。outline:0スタイルを使用して、フォーカスされているときに青い境界線を削除することもできます
編集：OPが彼が何を望んでいるかを明確にする前に答えました。以下は、javascripts onclickに似たonclickの場合であり、:active疑似クラスではありません。
これは、Javascriptまたはチェックボックスハックのいずれかでのみ実現できます。
チェックボックスハックでは、基本的にラベルをクリックすることができます。これにより、チェックボックスが「チェック」され、希望どおりにラベルのスタイルを設定できます。
id属性を使用してそれらを結合する必要はありません。
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>@TylerHは素晴らしい応答をしますが、それはかなり複雑なソリューションです。私は、余分な要素のない純粋なcssを使用した単純な「オンクリック」効果が必要なユーザーのためのソリューションを用意しています。
単純にcssトランジションを使用します。おそらくアニメーションでも同様のことができます。
トリックは、ユーザーがクリックしたときに続くように、遷移の遅延を変更することです。
.arrowDownContainer:active,
.arrowDownContainer.clicked {
filter: drop-shadow(0px 0px 0px steelblue);
transition: filter 0s;
}ここでは、「クリックされた」クラスも追加して、JavaScriptが必要に応じて効果を提供できるようにします。私の場合、この方法で指定された透明なグラフィックを青で強調表示するため、0pxドロップシャドウフィルターを使用します。
効果が出ないように、ここに0のフィルターがあります。エフェクトが解放されたら、トランジションを遅延して追加し、「クリックされた」エフェクトを提供できます。
.arrowDownContainer {
cursor: pointer;
position: absolute;
bottom: 0px;
top: 490px;
left: 108px;
height: 222px;
width: 495px;
z-index: 3;
transition: filter 0.3s ease 0.3s;
}これにより、ユーザーがボタンをクリックすると青くハイライト表示され、ゆっくりとフェードアウトするように設定できます（もちろん、他のエフェクトも使用できます）。
ハイライトするアニメーションが瞬時であるという意味でここでは制限がありますが、それでも望ましい効果が得られます。アニメーションでこのトリックを使用すると、全体的な遷移がよりスムーズになります。
わかりました、これは古い投稿かもしれません...しかし、最初の結果はグーグルであり、これを独自にミックスすることにしました。
最初にフォーカスを使用します
これは、私が表示している例ではうまく機能するためです。誰かがマウスダウンタイプのイベントを必要とする場合は、アクティブを使用します
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リンク： http : //jsfiddle.net/00wwkjux/
では、なぜこれを古いスレッドに投稿しているのでしょうか。ここでの例はさまざまであり、実用的な例である1つをコミュニティに提供するつもりです。
スレッドの作成者が既に回答したように、クリックイベントの間だけ効果を持続させたいと考えています。これはその必要性に対して正確ではありませんが、終わりです。activeは、マウスが押されている間アニメーション化し、最後に必要な変更はすべてjavascriptで行う必要があります。
警告！以下の特に簡単な答え！:)
あなたは実際にできると（そのようなブロック/ポップアップとしてそのクリックした後の可視表示され、滞在）持続することの変化を持っている唯一の CSS（とチェックボックスのハックを使用しない）の多くの何にもかかわらず（それ以外の場合は正しい）の長として、ここで主張に答えますホバー中の持続のみが必要なため。
ですから、BojanglesとTylerHの回答がうまくいくかどうかを確認してください。ただし、クリックしてもブロックが表示され続けるシンプルなCSSのみの回答が必要な場合（さらに、フォローアップクリックでブロックを非表示にすることもできます）、このソリューションを参照してください。
私も同じような状況で、JSを追加したり、マークアップ/ HTML（真のCSSソリューション）を変更したりできないonClickのポップアップdivが必要でしたが、これはいくつかの警告で可能です。（ 'id'を追加するために）HTMLを変更してそれを無効にできない限り、素晴らしいポップアップを作成できる：targetトリックを使用することはできません。
私の場合、ポップアップ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サンドボックスでの位置がおかしいので、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;
}ホバーしているときに赤に色付けし、ホバーしているときにクリックすると青にする必要がある要素に問題がありました。これをCSSで実現するには、たとえば次のものが必要です：
h1:hover { color: red; }
h1:active { color: blue; }
<h1>This is a heading.</h1>CSSセレクターの順序が私が抱えていた問題であることがわかるまで、しばらくの間苦労しました。問題は、場所を切り替えたところ、アクティブなセレクターが機能していなかったことでした。それから私はそれ:hoverが最初にそして次に行くことを知りました:active。
：targetを使用できます
一般的な目標のために
：目標
またはクラス名でフィルタリング
.classname：target
またはID名でフィルタリング
#idname：target
<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>:targetはすでに掲載されているので、もう一つは必要ありません。さらに、質問者は、他の要素を表示/非表示にするのではなく、「オンクリック」効果を与える方法を尋ねます。
:activeマウスがダウンしているときに動作します。何をしようとしているのかに応じて、CSS4疑似クラスを使用して機能させることができる場合があります:target。