Frage CSS per JavaScript ändern

[Fotobrush]

Hallo,
ich bräuchte mal eure Hilfe.

Ich blende per Mousover Informationen auf ein Bild. Dazu nutze ich CSS opacity.
Jetzt würde ich das auch gerne für Handynutzer anbieten. Hier soll der User auf ein Icon klicken um die Infos zu erhalten.

Mit den Beispielen im Internet will es einfach nicht funktionieren. Vielleicht liegt es daran, dass ich gleich 2 Classen ändern muss, eine für den Hintergrund und einen für den Inhalt.

.view-first .mask {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   background-color: rgba(219,127,8, 0.7);
   -webkit-transition: all 0.4s ease-in-out;
   -moz-transition: all 0.4s ease-in-out;
   -o-transition: all 0.4s ease-in-out;
   -ms-transition: all 0.4s ease-in-out;
   transition: all 0.4s ease-in-out;
}

Hier müsste ich opacity per Klick auf 1 ändern. Das hier scheint nicht zu funktionieren.

<a href=# onclick=javascript:document.getElementsByClassName('view-first').style.opacity='1'>ICON</a>

Hat einer von euch eine Idee?

Gruß Fotobrush

 

[scbawik]

Hallo,
ich bräuchte mal eure Hilfe.

Ich blende per Mousover Informationen auf ein Bild. Dazu nutze ich CSS opacity.
Jetzt würde ich das auch gerne für Handynutzer anbieten. Hier soll der User auf ein Icon klicken um die Infos zu erhalten.

Mit den Beispielen im Internet will es einfach nicht funktionieren. Vielleicht liegt es daran, dass ich gleich 2 Classen ändern muss, eine für den Hintergrund und einen für den Inhalt.

.view-first .mask {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   background-color: rgba(219,127,8, 0.7);
   -webkit-transition: all 0.4s ease-in-out;
   -moz-transition: all 0.4s ease-in-out;
   -o-transition: all 0.4s ease-in-out;
   -ms-transition: all 0.4s ease-in-out;
   transition: all 0.4s ease-in-out;
}

Hier müsste ich opacity per Klick auf 1 ändern. Das hier scheint nicht zu funktionieren.

<a href=# onclick=javascript:document.getElementsByClassName('view-first').style.opacity='1'>ICON</a>

Hat einer von euch eine Idee?

Gruß Fotobrush

Da Klassen auf mehrere Elemente angewendet werden können, gibt getElementsByClassName eine Liste aus Elementen zurück. Das erste Element mit dieser Klasse bekommst du also mit:

document.getElementsByClassName('view-first')[0].style.opacity='1'

 

[Fotobrush]

Vielen Dank, kannst du mir noch sagen wie ich "view-first" und "mask" in den Link rein bekomme? Mit JavaScript bin ich bisschen auf Kriegsfuß

 

[scbawik]

Vielen Dank, kannst du mir noch sagen wie ich "view-first" und "mask" in den Link rein bekomme? Mit JavaScript bin ich bisschen auf Kriegsfuß

Ein "bisschen" ist gut ;)

<a href="#" onclick="document.getElementsByClassName('view-first')[0].style.opacity='1'; return false;">ICON</a>

Kommentare zu Best practices etc. spare ich mir.

 

[Fotobrush]

Hmm, geht leider nicht.
In dem Link steht doch auch nur "view-first", aber "mask" muss doch auch auf 1 geändert werden. Kann ich da irgendwie zwei mal onclick rein packen?

 

[scbawik]

Hmm, geht leider nicht.
In dem Link steht doch auch nur "view-first", aber "mask" muss doch auch auf 1 geändert werden. Kann ich da irgendwie zwei mal onclick rein packen?

Achso, hab mich mit der Klasse vertan. Aber wir machen das jetzt einfach anders:

document.querySelector('.view-first .mask').style.opacity='1';

 

[Fotobrush]

YES!
Super, das hilft mir schon mal weiter.
Herzlichen Dank.:)