Problem: Pseudo-Klasse :focus

[znaxiboi]

Hallo zusammen!

Kurz zu mir: ich bin neue in diesem Forum, bin 22 Jahre alt und mache Momentan eine Ausbildung zum Mediengestalter im dritten Lehrjahr.

Nun zu meinem Problem:

Ich möchte wenn ich über einen div-Container hover in einem anderen Container etwas einblenden.
das habe ich so gelöst:
-------------------------------------

#box-die-die-action-auslöst { irgendwelche styles;}

#box-die-angezeigt-werden-soll-in-anderem-div { opacity:0;}

#box-die-die-action-auslöst:hover ~  #box-die-angezeigt-werden-soll-in-anderem-div { opacity:1;}

-------------------------------------

das eigentliche Problem:
ich möchte jetzt noch dafür sorgen, dass die Box die eingeblendet wird da bleibt wenn man den Div-Container klickt.
Meine Überlegung war dazu die Pseudo-Klasse :focus. Jedoch klappt das nicht so ganz wie ich mir das vorgestellt habe :(
Ich weiß das nicht jeder Browser das kann mit der :focus Klasse auf einem div-Container, es geht sich bei mir aber wirklich um die neuste Version von Firefox.

Mein Ansatz war der hier:
-------------------------------------

#box-die-die-action-auslöst { irgendwelche styles;}

#box-die-angezeigt-werden-soll-in-anderem-div { opacity:0;}

#box-die-die-action-auslöst:hover ~  #box-die-angezeigt-werden-soll-in-anderem-div { opacity:1;}
#box-die-die-action-auslöst:focus ~  #box-die-angezeigt-werden-soll-in-anderem-div { opacity:1;}

-------------------------------------

das klappt aber leider nicht :(
Bevor ihr euch wundert: Mein Ziel ist es komplett ohne jquery auszukommen, da ich das nicht wirklich beherrsche.
Natürlich könnte ich auch bei klick auf eine andere Seite verlinken auf der die jeweiligen Boxen aktiv sind, jedoch gibt das dann zu viele Subsites.....


Würde mich super freuen wenn mir einer von euch helfen kann!

Vielen Dank,
znaxi