onclick w css

Question

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

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

Znalazłem fajne przedstawienie tego co chcę uzyskać (widoczny powyżej), ale nie odszukałem rozwiązania.

Mam ukryty element, i chcę go wyświetlić po kliknięciu w inny element, ale chciałbym to zrobić samym html i css, a więc jak?

Comments

Specjalista nie jestem, wiec poczekam az ktos innys sie wypowie, ale obstawiam, ze bez js sie nie da.

---

Ogólnie mam małe rozwiązanie z checkboxem, ale nie o to chodzi, zapomniałem dodać w poście, że checkbox odpada.

---

Bez zdarzenia w js nie da się tego zrobić niestety.

---

@matizuu, Widać, że kod skopiowałeś stąd
https://stackoverflow.com/questions/13630229/can-i-have-an-onclick-effect-in-css

A więc, masz tam odpowiedzi pod pytaniem.

Answer 1

Tam, gdzie znalazłeś to przedstawienie, jest też sensowna odpowiedź.

Niemniej tego typu zachowanie powinno się implementować w JS.

Answer 2

Mógłbyś zrobić coś takiego:

<button class="btn">Click on me</button>
<div id="to-hidden">Lorem ipsum ...</div>

#to-hidden
{
  display: none;
}

.btn:focus + #to-hidden
{
  display: block;
}

jednak takie rozwiązanie ma wiele wad m.in element #to-hidden musi być bezpośrednio pod elementem który go aktywuje. Osobiście uważam więc że użycie js było by po prostu lepsze.

Rozwiązanie na codepen

Answer 3

:target jest chyba dobrym rozwiązaniem.

 

Comments

pomijając różne rozwiązania omijające JS warto jednak zastanowić się, czy czasami w apce gdzieś jeszcze nie używamy JS bo wtedy takie usilne omijanie tego w CSS jest trochę wg mnie bez sensu...