Noch eine "schwierige" ? Frage zu CSS


Sempervivum

Erfahrenes Mitglied
#2
Wenn Du mit "aktivieren" "sichtbar machen" meinst, so ist das nicht schwierig und wird häufig praktiziert. Mit addEventListener bei dem Buttton einen Eventlistener für das Klick registrieren und darin die Opacity mit style.opacity ändern.
 

EuroCent

KlappStuhl 2.0
#5
Du kannst mittels CSS3 per Pseudo ":target" deinem Div entsprechend via Display oder deiner Opacity ansprechen.

WICHTIG: Ist nur ein Beispielcode, ob es funktioniert kann Ich nicht sagen da nicht geprüft.
Hier ist nur deutlich wie Du das Pseudo ":target" verwenden kannst

Beispiel:
HTML:
<style>
    #weg {
        display: none;
    }
   
    #klick:target > #weg {
        display: block;
    }

    #weg2 {
        opacity: 0;
    }

   
#klick2:target > #weg2 {
        opacity: 1;
    }
</style>
<div id="weg">
    BlaBlaBla Text
</div>

<button id="klick">
    Zeige DIV
</button>

<div id="weg2">
    BlaBlaBla Text
</div>

<button id="klick2">
    Zeige DIV 2
</button>
 
#7
Du kannst mittels CSS3 per Pseudo ":target" deinem Div entsprechend via Display oder deiner Opacity ansprechen.

WICHTIG: Ist nur ein Beispielcode, ob es funktioniert kann Ich nicht sagen da nicht geprüft.
Hier ist nur deutlich wie Du das Pseudo ":target" verwenden kannst

Beispiel:
HTML:
<style>
    #weg {
        display: none;
    }
  
    #klick:target > #weg {
        display: block;
    }

    #weg2 {
        opacity: 0;
    }

  
#klick2:target > #weg2 {
        opacity: 1;
    }
</style>
<div id="weg">
    BlaBlaBla Text
</div>

<button id="klick">
    Zeige DIV
</button>

<div id="weg2">
    BlaBlaBla Text
</div>

<button id="klick2">
    Zeige DIV 2
</button>
Ja Danke, das ist interessant ...
 
#8
WICHTIG: Ist nur ein Beispielcode, ...
Nein , funktioniert nicht ... Verzeihen Sie, wenn ich es sage: Nicht funktionierende Beispiele in Foren sind eine Todsünde ... Habe ich mein Leben lang vermieden ...
 
#10
Es zeigt nur das Beispiel des ":target"-Pseudo auf nicht die Funktionalität :)

Gutes Beispiel findest Du hier: How to Trigger CSS3 Transitions on Click using :target

Ob das eine Todsünde ist, mag Ich zu bezweifeln, da Ich angegeben habe dass er denkbar nicht funktionieren wird.
Aber ich habe mich vorher extra schon prophylaktisch entschuldigt.

Dein Beispiel ist besser, weil es versucht per target auf benannte ids zuzugreifen .
Das wird auch irgendwie gehen.
Der Wurm ist hier bei der Benennung der id #weg (Syntax ?)

#klick:target > #weg {
display: none;
}