クリックで変更したい画像要素があります。
<img id="btnLeft">
これは動作します:
#btnLeft:hover {
width:70px;
height:74px;
}
しかし、私が必要としているのは、
#btnLeft:onclick {
width:70px;
height:74px;
}
しかし、それはうまくいきません。 CSSでonclick
の振る舞いをすることは可能ですか(つまりJavaScriptを使用せずに)。
一番近いのは :active
です。
#btnLeft:active {
width: 70px;
height: 74px;
}
ただし、これはマウスボタンが押されているときのみスタイルを適用します。スタイル を適用してそのままにする onclickの唯一の方法は、少しJavaScriptを使用することです。
CSSのみを使用して実際のclickイベントをシミュレートする最良の方法(実際に唯一の方法*)(要素にカーソルを合わせるか、要素をアクティブにするのではなく) mouseUp )がない場合は、チェックボックスハックを使用します。ラベルの<input type="checkbox">
属性を介して label
を for=""
要素にアタッチすることで機能します。
この機能には 幅広いブラウザのサポート (:checked
疑似クラスはIE9 +です)。
同じ値を<input>
のID属性とそれに付随する<label>
のfor=""
属性に適用すると、クリックするという事実のおかげで、 :checked
疑似クラスを使用して、クリック時にラベルのスタイルを変更するようブラウザーに指示できますラベルは「関連付けられた」<input type="checkbox">
をチェックおよびチェック解除します。
* IE7 +の:active
または:focus
擬似クラスを介して「選択された」イベントをシミュレートできます(たとえば、通常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>
ここで、マークアップの入力の直後にラベルを配置しました。これは、 隣接する兄弟セレクター ( + キー)を選択して、#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日だけ呼び出すことはできません。ただし、canは、いくつかのCSSを使用して、ラベルの外観と動作をHTMLボタンの外観と動作にかなり近づけます。
#btnControl {
display: none;
}
.btn {
width: 60px;
height: 20px;
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:20px;
}
.btn:hover {
background-image: linear-gradient(to bottom, #c3e3fa, #a5defb);
}
.btn:active {
margin-left: 1px 1px 0;
box-shadow: -1px -1px 1px #000;
outline: 1px solid black;
-moz-outline-radius: 5px;
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のほとんどは、ラベル要素のスタイルを設定するためのものです。 ボタンを実際に必要とせず、古い要素で十分な場合は、このデモのほとんどすべてのスタイルを削除できます。上記の2番目のデモ。
また、-moz-outline-radius
というプレフィックスのプロパティが1つあることに気付くでしょう。しばらく前に、Mozillaはこの素晴らしい非仕様のプロパティをFirefoxに追加しましたが、WebKitの人々は 追加しない を決定しました。そのため、CSSの行は、Firefoxを使用する人々にとっての進歩的な機能強化に過ぎないと考えてください。
あなたはクリックイベントを模倣するために疑似クラス:target
を使うことができます。
#something {
display: none;
}
#something:target {
display: block;
}
<a href="#something">Show</a>
<div id="something">Bingo!</div>
これがどのように見えるかです: http://jsfiddle.net/TYhnb/
注意すべきことは、これはハイパーリンクに限られているので、ボタンなどのハイパーリンク以外で使用する必要がある場合は、ボタンのように見えるようにハイパーリンクをスタイリングするなど、少しハックすることをお勧めします。
要素にtabindex
を与えると、クリックをシミュレートするために:focus
疑似クラスを使うことができます。
_ html _
<img id="btnLeft" tabindex="0" src="http://placehold.it/250x100" />
_ css _
#btnLeft:focus{
width:70px;
height:74px;
}
編集:OPは彼が欲しいものを明確にする前に答えた。以下は、:active
疑似クラスではなく、javascripts onclickに似たonclick用です。
これはJavascriptまたは Checkbox Hack のいずれかでのみ達成できます。
チェックボックスハックは基本的にあなたがラベルをクリックすることを可能にします。
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>
さて、これはおそらく古い投稿です...しかし、Googleで最初の結果であり、これとしてあなた自身のミックスを作ることにしました..
最初にフォーカスを使用します
この理由は、私が見せている例ではうまく動作するからです。もし誰かがマウスダウンタイプのイベントを望んでいるなら、 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/
では、なぜ私はこれを古いスレッドで投稿しているのですか。なぜなら、ここの例はさまざまで、実用的な例であるコミュニティに返すことを考えたからです。
スレッドの作成者が既に回答したように、彼らはクリックイベントの間だけ効果を持続させたいのです。今これはその必要性のために正確ではない間、その終わり。マウスが押されている間はactiveがアニメートされ、あなたが最後に持っている必要があるすべての変更はJavaScriptで行われる必要があります。
Bojanglesの答えは一般的に正しいです、しかし:
「スタイルを適用してクリック時に適用し続ける唯一の方法は、JavaScriptを使用することです。」
クリック後もブロックを表示したままにしておくという意味では、これはまったく当てはまりません。私は同様の状況がありました、私は私が少しもJSを追加することができなかったり、マークアップ/ HTMLを変更することができなかったonClickでポップアップdivを必要としましたHTMLを(「id」を追加するために)変更できない限り、Niceポップアップを作成できる:targetトリックは使用できません。
私の場合は、ポップアップdivが他のdivの内側に含まれていたので、ポップアップを他のdivの上に表示することを望みました。
/* 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/ /
純粋な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トランジションを使用します。おそらくアニメーションでも同じことができます。
トリックは、ユーザーがクリックしても持続するように遷移の遅延を変更することです。
.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;
}
これにより、ユーザーがボタンをクリックしたときに青色で強調表示されてからゆっくりフェードアウトするように設定できます(もちろん、他の効果も使用できます)。
ハイライトするアニメーションが瞬時であるという意味でここでは制限されていますが、それでも望ましい効果が得られます。アニメーションでこのトリックを使用して、よりスムーズな全体的な移行を生み出すことができます。
私はマウスホバーとマウスクリックのための以下のコードを持っています、そして、それは働きます:
//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セレクタの order が問題であることが判明するまで、しばらく苦労しました。問題は私が場所を変えたこととアクティブセレクターが機能していなかったことでした。それから私は:hover
が最初に行き、次に:active
に行くことを知りました。