Ahoi zusammen,
ich habe ein ziemlich blödes Problem.
Aktuell habe ich zwei Ebenen, auf der oberen befinden sich einige Buttons. Hovert man darüber, ändert sich das Hintergrundbild.
Das klappt alles ganz wundervoll und prächtig.
Nun sollen die Buttons aber anklickbar sein. Und da entsteht das Problem. Der Code ist so, dass innerhalb des "<div>" nur "<img>" Tags vorkommen (dürfen) und diese dann gefaded werden.
Fügt man in diesem div nun einen <ahref> hinzu, funktioniert der fade nicht mehr
Ich habe rumprobiert und probiert. Ich habe über den Button noch eine transparente Ebene gelegt (und diese verlinkt) mit einem transparenten Bild, aber auch hier funktioniert der Hover nicht, da der Cursor nicht "Durch das Bild" geht.
Auch mit CSS Transparenzen (Also das bild auf 0% opacity zu schalten), hat leider nicht geklappt. Sobald ein Bild darüber ist, wird der hover nicht mehr erkannt.
Diesen Code zu schreiben hat mich viel Kraft und Zeit gekostet (Der eigentliche Code ohne Kürzungen ist erheblich umfangreicher), eine gänzliche Umprogrammierung ist ausgeschlossen.
Gibt es irgend eine andere Möglichkeit, die Buttons zu verlinken? Etwa in CSS selbst, also ohne <ahref> oder ähnliches? Ich habe bei Google auch nichts gefunden.
Vielen Dank für Eure Hilfe, im Voraus
CODE HTML (Ich habe mal alle Styles entfernt, alles mit position:absolute.
CODE CSS
ich habe ein ziemlich blödes Problem.
Aktuell habe ich zwei Ebenen, auf der oberen befinden sich einige Buttons. Hovert man darüber, ändert sich das Hintergrundbild.
Das klappt alles ganz wundervoll und prächtig.
Nun sollen die Buttons aber anklickbar sein. Und da entsteht das Problem. Der Code ist so, dass innerhalb des "<div>" nur "<img>" Tags vorkommen (dürfen) und diese dann gefaded werden.
Fügt man in diesem div nun einen <ahref> hinzu, funktioniert der fade nicht mehr
Ich habe rumprobiert und probiert. Ich habe über den Button noch eine transparente Ebene gelegt (und diese verlinkt) mit einem transparenten Bild, aber auch hier funktioniert der Hover nicht, da der Cursor nicht "Durch das Bild" geht.
Auch mit CSS Transparenzen (Also das bild auf 0% opacity zu schalten), hat leider nicht geklappt. Sobald ein Bild darüber ist, wird der hover nicht mehr erkannt.
Diesen Code zu schreiben hat mich viel Kraft und Zeit gekostet (Der eigentliche Code ohne Kürzungen ist erheblich umfangreicher), eine gänzliche Umprogrammierung ist ausgeschlossen.
Gibt es irgend eine andere Möglichkeit, die Buttons zu verlinken? Etwa in CSS selbst, also ohne <ahref> oder ähnliches? Ich habe bei Google auch nichts gefunden.
Vielen Dank für Eure Hilfe, im Voraus
CODE HTML (Ich habe mal alle Styles entfernt, alles mit position:absolute.
HTML:
<div >
<img class="hov hov1" src="BUTTON1.jpg">
<img class="hov hov2" src="BUTTON2.jpg">
<div>
<img class="bild bild1" src="BGBILD1.jpg">
<img class="bild bild2" src="BGBILD2.jpg">
</div>
</div>CODE CSS
CSS:
.div{
position:absolute;
top:170px;
left:10px;
}
.bild{
opacity:0;
position:absolute;
transition: opacity 1.0s ease-in-out;
}
.hov1:hover ~ div .bild1,
.hov2:hover ~ div .bild2,
opacity:1;
transition: opacity 1.0s ease-in-out;
}
Zuletzt bearbeitet:
