Noch eine "schwierige" ? Frage zu CSS

[clamicun]

Kann ich ein <div> durch einen Buttonclick aktivieren oder die opacity eines <div> ändern?

 

[Sempervivum]

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]

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]

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

 

[EuroCent]

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:

<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]

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

ok.ok. ... Ich kann z.B. ein <div> sichtbar machen indem ich die opacity ändere , wenn es schon im sourcecode existiert ... Ich erstelle ein <div> unter bestimmten Umständen ??

 

[clamicun]

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:

<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]

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

 

[EuroCent]

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.
Zumal es nur veranschaulichen soll wie es aussieht

 

[clamicun]

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