Bisakah saya memiliki efek onclick di CSS?


335

Saya memiliki elemen gambar yang ingin saya ubah saat klik.

<img id="btnLeft">

Ini bekerja:

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

Tapi yang saya butuhkan adalah:

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

Tapi, tentu saja itu tidak berhasil. Apakah mungkin memiliki onclickperilaku dalam CSS (yaitu tanpa menggunakan JavaScript)?


7
:activeberfungsi saat mouse turun. Bergantung pada apa yang Anda coba lakukan, Anda mungkin dapat membuatnya bekerja menggunakan pseudo-class CSS4 :target.
bfavaretto

2
:targetbukanlah hal baru bagi Selectors 4. Ini telah tersedia sejak Selectors 3, yang sudah menjadi rekomendasi selama satu tahun pada saat penulisan.
BoltClock

Jawaban:


314

Yang paling dekat Anda akan dapatkan adalah :active:

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

Namun ini hanya akan berlaku gaya ketika tombol mouse ditekan. Satu-satunya cara untuk menerapkan gaya dan tetap menerapkannya pada klik adalah dengan menggunakan sedikit JavaScript.


@ Sparky672, Hampir semuanya: caniuse.com/#feat=css-sel2 (IE7 mendukung: aktif juga tetapi tidak terdaftar karena tidak mendukung beberapa penyeleksi lainnya)
jrajav

@ Kiyura, saya rasa semuanya, kecuali beberapa bug di IE 8 dan di atasnya .
Sparky

13
Jawaban ini sudah usang. Lihat jawaban TylerH untuk solusi khusus CSS untuk ini.
Maximillian Laumeister

Ada solusi CSS-only yang lebih mudah daripada hack checkbox TylerH.
David Ljung Madison Stellar

348

Jawab pada 2019:

Cara terbaik (sebenarnya satu-satunya cara *) untuk mensimulasikan acara klik yang sebenarnya hanya menggunakan CSS (bukan hanya melayang pada elemen atau membuat elemen aktif, di mana Anda tidak memiliki mouseUp ) adalah dengan menggunakan kotak centang hack. Ia bekerja dengan melampirkan labelke <input type="checkbox">elemen melalui label for=""atribut.

Fitur ini memiliki dukungan browser yang luas (kelas :checkedsemu adalah IE9 +).

Terapkan nilai yang sama ke <input> 's atribut ID dan menyertai <label>' s for=""atribut, dan Anda dapat memberitahu browser untuk re-gaya label di klik dengan :checkedpseudo-class, berkat fakta bahwa mengklik label akan memeriksa dan hapus centang pada "terkait" <input type="checkbox">.

* Anda dapat mensimulasikan peristiwa "terpilih" melalui kelas :activeatau :focussemu di IE7 + (mis. Untuk tombol yang biasanya 50pxlebar, Anda dapat mengubah lebarnya saatactive : #btnControl:active { width: 75px; }), tetapi mereka tidak benar "klik" peristiwa. Mereka "hidup" sepanjang waktu elemen dipilih (seperti Tabdengan menggunakan keyboard Anda), yang sedikit berbeda dari peristiwa klik yang sebenarnya, yang mengaktifkan aksi - biasanya - mouseUp.


Demo dasar hack kotak centang (struktur kode dasar untuk apa yang Anda minta):

Di sini saya telah menempatkan label tepat setelah input di markup saya. Ini agar saya dapat menggunakan pemilih saudara yang berdekatan (+ tombol) untuk memilih hanya label yang langsung mengikuti #demokotak centang saya . Karena :checkedpseudo-class berlaku untuk kotak centang, #demo:checked + labelhanya akan berlaku ketika kotak centang dicentang.

Demo untuk mengubah ukuran gambar pada klik, yang Anda tanyakan:

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

Dengan itu dikatakan, ada adalah kabar buruk. Karena label hanya dapat dikaitkan dengan satu kontrol formulir pada satu waktu , itu berarti Anda tidak bisa begitu saja meletakkan tombol di dalamnya<label></label> tag dan menyebutnya sehari. Namun, kita dapat menggunakan beberapa CSS untuk membuat label terlihat dan berperilaku cukup dekat dengan bagaimana sebuah tombol HTML terlihat dan berperilaku.

Demo untuk meniru efek klik tombol, di atas dan di luar apa yang Anda minta:

Sebagian besar CSS dalam demo ini hanya untuk menata elemen label. Jika Anda tidak benar-benar membutuhkan tombol , dan elemen lama apa pun sudah cukup, maka Anda dapat menghapus hampir semua gaya dalam demo ini, mirip dengan demo kedua saya di atas.

Anda juga akan melihat saya memiliki satu properti awalan di sana -moz-outline-radius,. Beberapa waktu yang lalu, Mozilla menambahkan properti non-spek yang mengagumkan ini ke Firefox, tetapi orang-orang di WebKit memutuskan mereka tidak akan menambahkannya , sayangnya. Jadi pertimbangkan bahwa baris CSS hanyalah peningkatan progresif untuk orang yang menggunakan Firefox.


2
Luar biasa! Tetapi apakah ada cara untuk mengembalikan perubahan juga saat mengklik di tempat lain selain pada input / gambar / tombol? Saya menggunakan contoh Anda untuk membuat bidang sembulan dan saya ingin itu menghilang ketika pengunjung mengklik pada halaman kosong. Terima kasih!
mxmehl

1
@mxmehl Jika Anda ingin mereka mengklik di tempat tertentu, Anda bisa melakukannya dengan elemen saudara yang berdekatan, mungkin. Namun, jika Anda ingin mengembalikannya hanya dengan mengeklik di mana saja pada layar yang kosong, Anda mungkin perlu pendengar acara JavaScript. Ingat, ini adalah retasan dan bukan cara "terbaik" untuk menciptakan pengalaman "interaktif"; itulah yang JS adalah untuk . Ini hanya cara melakukannya jika Anda dibatasi hanya menggunakan CSS. :-)
TylerH

5
Solusi ini masih bagus, tetapi ketika saya membaca "2017 answer" Saya mengharapkan sesuatu yang sangat keren (seperti fitur CSS3 yang akhirnya mendapatkan dukungan browser yang luas), bukan hack kotak centang tua yang sudah ada sejak 2011 ... Agak kecewa .
Christallkeks

3
@Christallkeks Jika CSS menambahkan sesuatu (mungkin tidak; interaktivitas di luar ruang lingkup tujuan CSS), saya akan memperbarui jawaban untuk memasukkannya. Seperti yang sudah ada, tajuk "jawaban 2017" adalah untuk membuat orang tahu bahwa jawaban ini adalah yang paling mutakhir, jadi sekilas mereka tidak akan melihat fakta bahwa jawaban itu diposting pada tahun 2015 dan pergi "oh , Saya ingin tahu apakah fitur baru belum ada ".
TylerH

1
@MuhammadSaqib Ya, itu harus bekerja pada browser seluler apa pun yang mendukung :checked.
TylerH

78

Anda dapat menggunakan pseudo class :targetuntuk meniru acara klik, izinkan saya memberi Anda sebuah contoh.

#something {
  display: none;
}

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

Begini tampilannya: http://jsfiddle.net/TYhnb/

Satu hal yang perlu diperhatikan, ini hanya terbatas pada hyperlink, jadi jika Anda perlu menggunakan selain hyperlink, seperti tombol, Anda mungkin ingin meretasnya sedikit, seperti menata hyperlink agar terlihat seperti tombol.


8
Bagaimana kita membalikkan tindakan?
Ansyori

Saya pikir Anda tidak dapat menargetkan sesuatu yang tidak ditampilkan.
Hazior

38

Jika Anda memberi elemen a tabindexmaka Anda dapat menggunakan :focuskelas pseudo untuk mensimulasikan klik.

HTML

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

CSS

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

http://jsfiddle.net/NaTj5/


2
ini bekerja dengan cukup baik! saat Anda menggunakan tabindex=-1item masih fokus, tetapi hanya dengan mouse, bukan keyboard, yang lebih baik dalam hal ini. Anda juga dapat menggunakan outline:0gaya untuk menghapus batas biru saat fokus
Stefan Paul Noack

35

Sunting: Dijawab sebelum OP menjelaskan apa yang dia inginkan. Berikut ini untuk onclick yang mirip dengan javascripts onclick, bukan:active kelas pseudo.

Ini hanya dapat dicapai dengan Javascript atau Hack Kotak Centang

Retas kotak centang pada dasarnya membuat Anda mengklik label, yang "memeriksa" kotak centang, memungkinkan Anda untuk menata label seperti yang Anda inginkan.

The demo


1
Anda juga dapat memasukkan input Anda ke dalam label sehingga Anda tidak harus menggunakan idatribut untuk mengikatnya.
stackular

12

TylerH membuat jawaban yang sangat bagus, dan saya hanya harus memberikan pembaruan versi tombol terakhir.

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


Bagus: gaya aktif; untuk apa aku pergi, tetapi sedikit tergesa-gesa ketika membangun tampilan mereka.
TylerH

9

Bagaimana dengan solusi CSS murni tanpa menjadi (yang) meretas?

masukkan deskripsi gambar di sini

.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 memiliki respons yang hebat tetapi ini solusi yang cukup kompleks. Saya punya solusi bagi Anda yang hanya ingin efek "onclick" sederhana dengan css murni tanpa banyak elemen tambahan.

Kami hanya akan menggunakan transisi css. Anda mungkin dapat melakukan hal serupa dengan animasi.

Caranya adalah dengan mengubah penundaan untuk transisi sehingga akan bertahan saat pengguna mengklik.

.arrowDownContainer:active,
.arrowDownContainer.clicked {
  filter: drop-shadow(0px 0px 0px steelblue);
  transition: filter 0s;
}

Di sini saya menambahkan kelas "diklik" juga sehingga javascript juga dapat memberikan efek jika perlu. Saya menggunakan filter drop-shadow 0px karena akan menyorot biru transparan yang diberikan seperti ini untuk kasus saya.

Saya memiliki filter pada 0s di sini sehingga tidak akan berpengaruh. Ketika efek dilepaskan saya kemudian dapat menambahkan transisi dengan penundaan sehingga akan memberikan efek "diklik" yang bagus.

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

Ini memungkinkan saya untuk mengaturnya sehingga ketika pengguna mengklik tombol, itu menyoroti biru kemudian menghilang perlahan (Anda bisa, tentu saja, menggunakan efek lain juga).

Meskipun Anda terbatas di sini dalam arti bahwa animasi yang disoroti adalah instan, itu tetap memberikan efek yang diinginkan. Anda mungkin dapat menggunakan trik ini dengan animasi untuk menghasilkan transisi keseluruhan yang lebih mulus.

masukkan deskripsi gambar di sini

masukkan deskripsi gambar di sini


FWIW kompleksitasnya adalah apa yang diperlukan untuk melembagakan efek klik persisten . Jika Anda hanya ingin melakukan sesuatu sementara yang tidak mempertahankan keadaannya, ini atau banyak solusi lain baik-baik saja dan saya setuju pasti kurang kompleks.
TylerH

Sepakat. Semua yang Anda butuhkan adalah hasil akhir dan selalu baik untuk mengetahui semua opsi. Ini adalah utas yang bagus untuk mereka yang pasti. Mungkin layak artikel media keseluruhan membahas masing-masing dan manfaatnya masing-masing!
Braden Rockwell Napier

8

Oke, ini mungkin posting lama ... tetapi hasil pertama di google dan memutuskan untuk membuat campuran Anda sendiri pada ini sebagai ..

PERTAMA AKU AKAN MENGGUNAKAN FOKUS

Alasannya adalah ini berfungsi dengan baik untuk contoh yang saya tunjukkan, jika seseorang menginginkan acara tipe mouse kemudian gunakan aktif

KODE HTML:

<button class="mdT mdI1" ></button>
<button class="mdT mdI2" ></button>
<button class="mdT mdI3" ></button>
<button class="mdT mdI4" ></button>

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

Jadi mengapa saya memposting ini di utas lama, baik karena contoh di sini bervariasi dan saya pikir untuk memberikan satu kembali ke komunitas yang merupakan contoh kerja.

Seperti yang sudah dijawab oleh pembuat utas, mereka hanya ingin efeknya bertahan selama acara klik. Sekarang sementara ini tidak tepat untuk kebutuhan itu, itu dekat. aktif akan bernyawa saat mouse tidak aktif dan perubahan apa pun yang Anda perlukan lebih lama harus dilakukan dengan javascript.


1
Bagi siapa pun yang membaca, toh membuatnya beralih? Atau itu terlalu banyak meminta css lol?
DardanM

Sejauh yang saya tahu, fokus / aktif / melayang adalah sedekat yang Anda bisa dapatkan dengan css .. Anda mungkin dapat melakukan sesuatu yang mewah dengan opsi / pilih jenis kode .. Tetapi belum mencoba / membutuhkan itu belum
Marah 84

7

Peringatan! Jawabannya sangat sederhana di bawah ini! :)

Anda sebenarnya dapat memiliki perubahan yang tetap ada (seperti blok / munculan yang muncul dan tetap terlihat setelah klik) dengan hanya CSS (dan tanpa menggunakan hack kotak centang) terlepas dari apa yang diklaim oleh banyak (jika tidak benar) jawaban di sini, selama karena Anda hanya perlu ketekunan selama melayang.

Jadi, lihat jawaban Bojangles dan TylerH jika jawaban itu cocok untuk Anda, tetapi jika Anda menginginkan jawaban sederhana dan hanya CSS yang akan membuat blok terlihat setelah diklik (dan bahkan dapat menghilangkan blok tersebut dengan tindak lanjut klik), maka lihat solusi ini.

Saya memiliki situasi yang serupa, saya memerlukan div popup dengan onClick di mana saya tidak dapat menambahkan JS atau mengubah markup / HTML (solusi yang benar-benar CSS) dan ini dimungkinkan dengan beberapa peringatan. Anda tidak dapat menggunakan: target trick yang dapat membuat popup yang bagus kecuali Anda dapat mengubah HTML (untuk menambahkan 'id') sehingga tidak ada.

Dalam kasus saya div popup terdapat di dalam div lain, dan saya ingin popup muncul di atas div lainnya, dan ini dapat dilakukan dengan menggunakan kombinasi: active dan: 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;
}

Contoh (dan juga yang memungkinkan mengklik popup untuk menghilangkannya) di:

http://davesource.com/Solutions/20150324.CSS-Hanya-Klik-to-Plikup-Div/

Saya juga memasukkan contoh potongan kode di bawah ini, tetapi posisi di sandbox stackoverflow aneh jadi saya harus meletakkan teks 'klik di sini' setelah innerDiv, yang biasanya tidak diperlukan.

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


1
(re: diskusi komentar kami sebelumnya) Info div tidak tetap terlihat melewati mouseUp di Firefox. Meskipun tetap terlihat melewati mouseUp di browser lain (IE, Edge, Chrome), itu tidak bertahan ketika mouse dipindahkan dari kotak di browser lain, sehingga mencegahnya dari dianggap sebagai 'onclick' event nyata ( misalnya perubahan yang terus-menerus).
TylerH

2

Saya memiliki kode di bawah ini untuk mouse hover dan klik mouse dan berfungsi:

//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%;
}

dan kode ini menyembunyikan gambar ketika Anda mengkliknya:

.thumbnail:active span {
    visibility: hidden;
}

2

Saya memiliki masalah dengan elemen yang harus diwarnai MERAH pada hover dan menjadi BIRU pada klik saat sedang melayang. Untuk mencapai ini dengan css, Anda perlu misalnya:

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

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

Saya berjuang selama beberapa waktu sampai saya menemukan bahwa urutan penyeleksi CSS adalah masalah yang saya alami. Masalahnya adalah saya mengganti tempat dan pemilih aktif tidak berfungsi. Kemudian saya menemukan bahwa :hoveruntuk pergi dulu dan kemudian :active.


-3

Anda dapat menggunakan: target

untuk target umum

:target

atau filter berdasarkan nama kelas

.classname: target

atau filter berdasarkan nama 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">&times;</a>
    <p>Some text. Some text. Some text.</p>
    <p>Some text. Some text. Some text.</p>
</div>

2
Jawaban yang menunjukkan cara menggunakan :targetsudah diposting, jadi tidak perlu lagi. Lebih lanjut, si penanya menanyakan bagaimana cara memiliki efek "klik", tidak menunjukkan / menyembunyikan elemen lain.
Ason

Ini lebih merupakan efek "onload" daripada "onclick".
TylerH
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.