Hover , Active po najechaniu myszką , zamiana napisu itp

Mam coś takiego: (spojler jest już gotową wtyczką która zamazuje obraz po najechaniu a po kliknięcu odsłania_

.gosc .spojler :active
{
 visibility: hidden;
}


.gosc .spojler :active:after {
   visibility: hidden;
       content: "zaloguj sie!" ;
}

Generalnie spojler działa tak jak trzeba ale ustawiam dla klasy gość aby sie nie wyswietlał.
I teraz ta czesc działa dobrze prócz tego że po nacisnięciu nie wyswietla się napis z content: "zaloguj sie!" ;

nie wiem co robie nie tak.
Tak samo chce ustawić klase : hover ale nie chce to działać. Ani napisa się nie wyświetla tylko cały czas miga kursor myszki.

Inymi słowy

Jak ustawić aby:

1. Po najechaniu i kliknięciu nie pojawiał się napis który ukrywa się za zalogowany a zamiast tego napis zaloguj się.

A czy nie byłoby prościej, zamiast się bawić w kombinowanie w CSS, załatwić temat w JS?
Poza tym jakbyś dał trochę więcej kodu, najlepiej link do działającej wersji, to by ułatwiło zadanie. Bo tak bez kontekstu to trochę trudno się zgaduje.

Uwagi:

• skąd u ludzi tendencją, żeby używać nagminnie selektora dowolnego potomka spacja zamiast selektora dziecka >?
• zapis .gosc .spojler :active jest niepoprawny, nie stawiamy spacji przed ":",
• jak chcesz, żeby coś się wyświetliło, to nie ustawiaj mu visibility: hidden tylko visible.

.gosc > .spojler:active {
 visibility: hidden;
}

.gosc > .spojler:active:after {
 visibility: visible;
 content: "zaloguj sie!" ;
}

<div class="gosc">
  <div class="spojler">aaa</div>
</div>