Mam element obrazu, który chcę zmienić po kliknięciu.
<img id="btnLeft">
To działa:
#btnLeft:hover {
width:70px;
height:74px;
}
Ale potrzebuję:
#btnLeft:onclick {
width:70px;
height:74px;
}
Ale to oczywiście nie działa. Czy w ogóle możliwe jest onclick
zachowanie w CSS (tj. Bez użycia JavaScript)?
:active
działa, gdy mysz jest wciśnięta. W zależności od tego, co próbujesz zrobić, możesz być w stanie sprawić, że będzie działać przy użyciu pseudoklasy CSS4:target
.:target
nie jest nowością w Selektorach 4. Jest dostępny od Selektorów 3, które były już rekomendacją na rok w momencie pisania.Odpowiedzi:
Najbliższe, które otrzymasz
:active
:Będzie to jednak obowiązywać tylko wtedy, gdy przycisk myszy zostanie przytrzymany. Jedynym sposobem na zastosowanie stylu i zachowanie go po kliknięciu jest użycie JavaScript.
źródło
Odpowiedź od 2019 r .:
Najlepszym sposobem (właściwie jedynym sposobem *) na symulację rzeczywistego zdarzenia kliknięcia przy użyciu tylko CSS (zamiast najechania myszką na element lub aktywowania elementu, gdy nie masz mouseUp ), jest użycie hackowania pola wyboru. Działa poprzez dołączenie a
label
do<input type="checkbox">
elementu za pomocąfor=""
atrybutu etykiety .Ta funkcja ma szeroką obsługę przeglądarki (
:checked
pseudo-klasa to IE9 +).Stosować tę samą wartość do
<input>
„s atrybut ID i towarzyszącej<label>
” sfor=""
atrybutu, i można powiedzieć, przeglądarkę do ponownego stylu etykieta na kliknięcia z:checked
pseudo-klasie, dzięki temu, że kliknięcie etykiety sprawdzi i odznacz "powiązany"<input type="checkbox">
.* Można symulować „wybrane” zdarzenie za pośrednictwem
:active
lub:focus
pseudo-klasy w IE7 + (np za pomocą przycisku, który jest zwykle50px
szeroki, można zmienić jego szerokość, natomiastactive
:#btnControl:active { width: 75px; }
), ale te nie są prawdziwe „kliknięcie” wydarzenia. Są one „aktywne” przez cały czas wybierania elementu (na przykład przez Tabbing za pomocą klawiatury), co nieco różni się od zdarzenia prawdziwego kliknięcia, które uruchamia akcję - zazwyczaj -mouseUp
.Podstawowe demo hacka pola wyboru (podstawowa struktura kodu o co pytasz):
Pokaż fragment kodu
Tutaj umieściłem etykietę zaraz po danych wejściowych w znacznikach. Jest tak, że mogę użyć sąsiedniego selektora rodzeństwa ( +klawisza), aby zaznaczyć tylko etykietę, która następuje bezpośrednio po moim polu
#demo
wyboru. Ponieważ:checked
pseudoklasa dotyczy pola wyboru,#demo:checked + label
będzie obowiązywać tylko wtedy, gdy pole wyboru jest zaznaczone.Demo zmiany rozmiaru obrazu po kliknięciu, o co pytasz:
Biorąc to pod uwagę, są złe wieści. Ponieważ etykieta może być skojarzona tylko z jedną kontrolką formularza na raz , oznacza to, że nie można po prostu wrzucić przycisku do
<label></label>
tagów i nazwać go dniem. Jednak możliwe użyć CSS, aby etykieta wyglądała i zachowywała się dość blisko tego, jak przycisk HTML wygląda i zachowuje się.Demo naśladujące efekt kliknięcia przycisku, wykraczający poza to, o co pytasz:
Pokaż fragment kodu
Większość CSS w tym demo służy tylko do stylizacji elementu etykiety. Jeśli tak naprawdę nie potrzebujesz przycisku , a wystarczy dowolny stary element, możesz usunąć prawie wszystkie style z tej wersji demo, podobnie jak w mojej drugiej wersji powyżej.
Zauważysz również mam jedną właściwość ustaloną z góry w tam
-moz-outline-radius
. Jakiś czas temu Mozilla dodała tę niesamowitą nieokreśloną właściwość do Firefoksa, ale ludzie z WebKit zdecydowali, że nie zamierzają jej dodawać , niestety. Więc rozważ tę linię CSS jako progresywne ulepszenie dla osób korzystających z Firefoksa.źródło
:checked
.Możesz użyć pseudoklasy
:target
do naśladowania zdarzenia kliknięcia, dam ci przykład.Oto jak to wygląda: http://jsfiddle.net/TYhnb/
Należy zauważyć, że ogranicza się to tylko do hiperłącza, więc jeśli chcesz użyć innego niż hiperłącze, takiego jak przycisk, możesz go nieco zhakować, na przykład zaprojektować hiperłącze, aby wyglądało jak przycisk.
źródło
Jeśli dasz elementowi
tabindex
, możesz użyć:focus
pseudoklasy do symulacji kliknięcia.HTML
CSS
http://jsfiddle.net/NaTj5/
źródło
tabindex=-1
z przedmiotu można nadal ustawiać ostrość, ale tylko myszą, a nie klawiaturą, co w tym przypadku jest lepsze. możesz również użyćoutline:0
stylu, aby usunąć niebieską ramkę, gdy jest skupionyEdycja: Odpowiedzi przed OP wyjaśnił, czego chce. Poniższe informacje dotyczą kliknięcia onclick podobnego do skryptów javascript, a nie
:active
pseudoklasy.Można to osiągnąć tylko za pomocą Javascript lub Checkbox Hack
Hack pola wyboru zasadniczo polega na kliknięciu etykiety, która „sprawdza” pole wyboru, umożliwiając stylizację etykiety według własnego uznania.
demo
źródło
id
atrybutów do ich łączenia.TylerH udzielił naprawdę dobrej odpowiedzi, a ja po prostu musiałem zaktualizować tę ostatnią wersję przycisku.
źródło
Co powiesz na czyste rozwiązanie CSS bez bycia hackowanym?
@TylerH ma świetną odpowiedź, ale jest to dość złożone rozwiązanie. Mam rozwiązanie dla tych z Was, którzy chcą po prostu prostego efektu „kliknięcia” z czystym css bez dodatkowych elementów.
Będziemy po prostu używać przejść css. Prawdopodobnie możesz zrobić podobnie z animacjami.
Sztuką jest zmienić opóźnienie przejścia, aby trwało, gdy użytkownik kliknie.
Tutaj dodam także klasę „klikniętą”, aby w razie potrzeby javascript mógł także zapewnić efekt. Korzystam z filtru cienia 0 pikseli, ponieważ w ten sposób podświetli moją przezroczystą grafikę na niebiesko.
Mam tutaj filtr zerowy, aby nie zadziałał. Po zwolnieniu efektu mogę dodać przejście z opóźnieniem, aby zapewnić przyjemny efekt „kliknięcia”.
To pozwala mi skonfigurować go tak, aby kliknięcie przycisku przez użytkownika podświetlało kolor niebieski, a następnie powoli zanikało (oczywiście można było również użyć innych efektów).
Chociaż jesteś tutaj ograniczony w tym sensie, że animacja do podświetlenia jest natychmiastowa, nadal zapewnia pożądany efekt. Prawdopodobnie możesz użyć tej sztuczki z animacją, aby uzyskać płynniejsze ogólne przejście.
źródło
Okej, to może stary post ... ale był pierwszym rezultatem w Google i postanowiłem stworzyć własny miks na ten temat jako ...
PIERWSZE KORZYSTAM Z OSTROŚCI
Powodem tego jest to, że działa ładnie w przykładzie, który pokazuję, jeśli ktoś chce zdarzenia typu myszy, użyj aktywnej
KOD HTML:
KOD CSS:
JS FIDDLE LINK: http://jsfiddle.net/00wwkjux/
Więc dlaczego zamieszczam to w starym wątku, no cóż, ponieważ tutaj przykłady są różne i pomyślałem, aby przekazać je społeczności, która jest działającym przykładem.
Jak już odpowiedział twórca wątku, chcą, aby efekt trwał tylko podczas zdarzenia kliknięcia. Teraz, choć nie jest to dokładnie takie potrzeby, jest blisko. Aktywne będzie animowane, gdy mysz będzie w pozycji opuszczonej, a wszelkie zmiany, które trzeba będzie trwać dłużej, należy wprowadzić w javascript.
źródło
Ostrzeżenie! Szczególnie prosta odpowiedź poniżej! :)
Ty rzeczywiście mogą mieć zmiany, który utrzymuje się (takie jak blok / popup, że pojawia się i pozostaje widoczne po kliknięciu) z tylko CSS (oraz bez użycia hack pole wyboru) Wbrew temu, co wielu z (inaczej poprawna) odpowiada tutaj roszczenia, jak długo ponieważ potrzebujesz tylko uporu podczas najechania kursorem.
Spójrz więc na odpowiedzi Bojangles i TylerH, jeśli te działają dla Ciebie, ale jeśli chcesz prostej odpowiedzi zawierającej tylko CSS, która będzie wyświetlać blok po kliknięciu (a nawet może sprawić, że blok zniknie za pomocą kolejnego kliknięcia), to zobacz to rozwiązanie.
Miałem podobną sytuację, potrzebowałem wyskakującego okienka z onClick, w którym nie mogłem dodać żadnego JS ani zmienić znaczników / HTML (rozwiązanie naprawdę CSS) i jest to możliwe z pewnymi zastrzeżeniami. Nie możesz użyć sztuczki: target, która może stworzyć fajne wyskakujące okienko, chyba że możesz zmienić kod HTML (aby dodać „id”), aby go nie było.
W moim przypadku wyskakujące okienko div było zawarte w innym divie i chciałem, aby wyskakujące okienko pojawiało się nad innym divem, i można to zrobić za pomocą kombinacji: active i: hover:
Przykład (a także taki, który umożliwia kliknięcie wyskakującego okienka, aby zniknęło) w:
http://davesource.com/Solutions/20150324.CSS-Only-Click-to-Popup-Div/
Wstawiłem także przykładowy fragment kodu poniżej, ale pozycjonowanie w piaskownicy stackoverflow jest dziwne, więc musiałem umieścić tekst „kliknij tutaj” po wewnętrznej części DIV, co zwykle nie jest potrzebne.
źródło
Mam poniższy kod do najechania myszą i kliknięcia myszą i działa:
a ten kod ukrywa obraz po kliknięciu:
źródło
Miałem problem z elementem, który musiał zostać zabarwiony na CZERWONO po najechaniu kursorem i być NIEBIESKI na kliknięciu podczas najechania kursorem. Aby to osiągnąć za pomocą css, potrzebujesz na przykład:
Zmagałem się przez jakiś czas, dopóki nie odkryłem, że problemem jest kolejność selektorów CSS. Problem polegał na tym, że zmieniałem miejsca i aktywny selektor nie działał. Potem dowiedziałem się, że
:hover
najpierw:active
.źródło
możesz użyć: target
dla ogólnego celu
lub filtruj według nazwy klasy
lub filtruj według nazwy id
źródło
:target
jest już opublikowana, więc nie trzeba jej więcej. Ponadto pytający pyta, jak uzyskać efekt „kliknięcia”, a nie pokazywać / ukrywać inne elementy.