web-dev-qa-db-ja.com

CSSでオンクリック効果を得ることができますか？

クリックで変更したい画像要素があります。

<img id="btnLeft">

これは動作します：

#btnLeft:hover {
    width:70px;
    height:74px;
}

しかし、私が必要としているのは、

#btnLeft:onclick {
    width:70px;
    height:74px;
}

しかし、それはうまくいきません。 CSSでonclickの振る舞いをすることは可能ですか（つまりJavaScriptを使用せずに）。

csscss3onclick
274
Alegro

一番近いのは :active です。

#btnLeft:active {
    width: 70px;
    height: 74px;
}

ただし、これはマウスボタンが押されているときのみスタイルを適用します。スタイル を適用してそのままにする onclickの唯一の方法は、少しJavaScriptを使用することです。

255
Bojangles

2019年現在の回答：

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を使用する人々にとっての進歩的な機能強化に過ぎないと考えてください。

308
TylerH

あなたはクリックイベントを模倣するために疑似クラス:targetを使うことができます。

#something {
  display: none;
}

#something:target {
  display: block;
}
<a href="#something">Show</a>
<div id="something">Bingo!</div>

これがどのように見えるかです： http://jsfiddle.net/TYhnb/

注意すべきことは、これはハイパーリンクに限られているので、ボタンなどのハイパーリンク以外で使用する必要がある場合は、ボタンのように見えるようにハイパーリンクをスタイリングするなど、少しハックすることをお勧めします。

77
Hendra Uzia

要素にtabindexを与えると、クリックをシミュレートするために:focus疑似クラスを使うことができます。

_ html _ 

<img id="btnLeft" tabindex="0" src="http://placehold.it/250x100" />

_ css _ 

#btnLeft:focus{
    width:70px;
    height:74px;
}

http://jsfiddle.net/NaTj5/ /

36
Blake Plumb

編集：OPは彼が欲しいものを明確にする前に答えた。以下は、:active疑似クラスではなく、javascripts onclickに似たonclick用です。

これはJavascriptまたは Checkbox Hack のいずれかでのみ達成できます。

チェックボックスハックは基本的にあなたがラベルをクリックすることを可能にします。

デモ

33
Andy

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>
12
LGSon

さて、これはおそらく古い投稿です...しかし、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で行われる必要があります。

7
Angry 84

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/ /

4
David Ljung Madison

純粋なCSSソリューションをハッカーにしないでどうでしょう？

enter image description here 

.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;
}

これにより、ユーザーがボタンをクリックしたときに青色で強調表示されてからゆっくりフェードアウトするように設定できます（もちろん、他の効果も使用できます）。

ハイライトするアニメーションが瞬時であるという意味でここでは制限されていますが、それでも望ましい効果が得られます。アニメーションでこのトリックを使用して、よりスムーズな全体的な移行を生み出すことができます。

enter image description here

enter image description here

4
Braden Rockwell Napier

私はマウスホバーとマウスクリックのための以下のコードを持っています、そして、それは働きます：

//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;
}
2
Pir Fahim Shah

ホバーしているときは赤色に着色され、ホバーされているときはクリックで青色になる必要がある要素に問題がありました。 CSSでこれを実現するには、例えば以下が必要です。

h1:hover { color: red; } 
h1:active { color: blue; }

<h1>This is a heading.</h1>

CSSセレクタの order が問題であることが判明するまで、しばらく苦労しました。問題は私が場所を変えたこととアクティブセレクターが機能していなかったことでした。それから私は:hoverが最初に行き、次に:activeに行くことを知りました。

2
Alreadytakenindeed