Noch eine "schwierige" ? Frage zu CSS

Sempervivum

Erfahrenes Mitglied
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.
 

clamicun

Mitglied
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.

Nein, ich meine nicht sichtbar machen, sondern aktivieren ... zB. onClick zeige, aktiviere, erstelle den "<div>
 

Sempervivum

Erfahrenes Mitglied
Verstehe nicht:
"zeige" ist für mich das selbe wie "mache sichtbar"
"aktiviere" ist mir unklar
"erstelle" ist klar und kein Problem
 

EuroCent

Klappstuhl 2.0
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>
 

clamicun

Mitglied
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 ...
 

clamicun

Mitglied
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 ...
 

clamicun

Mitglied
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;
}