Bild Verlinkung Nicht Durch a Href Sondern Anders Möglich

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

Der hier verwendete Code

<style> *{ margin:0; padding:0; } #box{ width:800px; position:absolute; top:10px; left:10px; border:1px solid black; height:400px; overflow:hidden; } #bild1,#bild7{ margin-top:70px; } #bild2,#bild6{ margin-top:50px; } #bild3,#bild5{ margin-top:30px; } #bild4{ margin-top:10px; } a{ border:2px solid white; width:104px; height:100px; margin-top:0; float:left; } .klein{ width:100%; } #ankucken{ width:100%; height:50vh; min-height:230px; border:1px solid black; overflow:hidden; } .big{ height:100%; display:none; } #bild1:hover ~ div > #bild8, #bild2:hover ~ div > #bild9, #bild3:hover ~ div > #bild10, #bild4:hover ~ div > #bild11, #bild5:hover ~ div > #bild12, #bild6:hover ~ div > #bild13, #bild7:hover ~ div > #bild14{ display:block; margin:0 auto; } </style> <div id="box"> <a href="#" id="bild1"><img class="klein" src="https://basti1012.bplaced.net/image/2.png"></a> <a href="#" id="bild2"><img class="klein" src="https://basti1012.bplaced.net/image/3.png"></a> <a href="#" id="bild3"><img class="klein" src="https://basti1012.bplaced.net/image/4.png"></a> <a href="#" id="bild4"><img class="klein" src="https://basti1012.bplaced.net/image/5.png"></a> <a href="#" id="bild5"><img class="klein" src="https://basti1012.bplaced.net/image/6.png"></a> <a href="#" id="bild6"><img class="klein" src="https://basti1012.bplaced.net/image/7.png"></a> <a href="#" id="bild7"><img class="klein" src="https://basti1012.bplaced.net/image/8.png"></a> <div id="ankucken"> <img class="big" src="https://basti1012.bplaced.net/image/9.png" id="bild8"> <img class="big" src="https://basti1012.bplaced.net/image/7.png" id="bild9"> <img class="big" src="https://basti1012.bplaced.net/image/2.png" id="bild10"> <img class="big" src="https://basti1012.bplaced.net/image/7.png" id="bild11"> <img class="big" src="https://basti1012.bplaced.net/image/3.png" id="bild12"> <img class="big" src="https://basti1012.bplaced.net/image/9.png" id="bild13"> <img class="big" src="https://basti1012.bplaced.net/image/3.png" id="bild14"> </div>

Add Comment

* Required information
1000
Drag & drop images (max 3)
Powered by Commentics

Comments

No comments yet. Be the first!