• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Zmiana zdjecia po kliknięciu.

VPS Starter Arubacloud
0 głosów
131 wizyt
pytanie zadane 28 grudnia 2022 w HTML i CSS przez tyrkotek12 Nowicjusz (120 p.)

Dzień dobry,

mam pytanie w jaki sposób po kliknięciu w zdjęcie, one znika i pojawia się w to miejsce tekst?

próbowałem coś w tym stylu 

<style>
 
.kot
{
    color: black;
    font-size: 20px;
	

}  
       
 
.kot div
{
    background-color: green;
    font-size: 20px;
    padding: 50px;
    display: none;
	opacity: 0;
	
}
 
.kot:active div
{
    display: flex;
    font-size: 20px;
    padding: 50px;
    color: #fff;
	visibility: visibile;	
	opacity: 1;
	
}
 
 .kot:active:after div
{
    
	visibility: hidden;	
	opacity: 0;
	
}
 
        </style>


       <div class="kot"><img src="kotczarny.jpg" title="To jest mój czarny kotek" alt="Czarny kotek" width="450px" ><div> Witam witam witam</div></div>
      

ale coś nie wychodzi mi, potrzebuje to zrobić w html/css bez JS. na zasadzie cała zawartość diva(zdjęcie) jest podmieniana na tekst który dalej pojawia się w tym samym divie

1 odpowiedź

0 głosów
odpowiedź 28 grudnia 2022 przez VBService Ekspert (250,450 p.)
edycja 28 grudnia 2022 przez VBService

w jaki sposób po kliknięciu w zdjęcie, one znika i pojawia się w to miejsce tekst?

Jeżeli chcesz zrobić tego typu podmianę, bez użycia js-a, spróbuj trick-u z

<input type="checkbox" id="name">
<label for="name">
    
    ...
</label>

czy

<label for="name">
    <input type="checkbox" id="name">
    
    ...
</label>

a w css-ie [ :checked ]

input[type=checkbox]:checked {
  ...
}

 

 

 

BTW, parę miesięcy temu padło "podobne" pytanie, i wtedy "urodził się" taki kod, może będzie dla Ciebie inspiracją.

Podobne pytania

0 głosów
2 odpowiedzi 361 wizyt
pytanie zadane 27 listopada 2018 w HTML i CSS przez YakumoPL Obywatel (1,970 p.)
0 głosów
1 odpowiedź 498 wizyt
pytanie zadane 12 stycznia 2016 w HTML i CSS przez toster234 Początkujący (370 p.)
0 głosów
1 odpowiedź 1,211 wizyt
pytanie zadane 22 marca 2018 w JavaScript przez w2 Obywatel (1,110 p.)

92,416 zapytań

141,222 odpowiedzi

318,985 komentarzy

61,831 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...