basti1012.bplaced.net

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

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="/image/2.png"></a>
<a href="#" id="bild2"><img class="klein" src="/image/3.png"></a>
<a href="#" id="bild3"><img class="klein" src="/image/4.png"></a>
<a href="#" id="bild4"><img class="klein" src="/image/5.png"></a>  
<a href="#" id="bild5"><img class="klein" src="/image/6.png"></a>     
<a href="#" id="bild6"><img class="klein" src="/image/7.png"></a>       
<a href="#" id="bild7"><img class="klein" src="/image/8.png"></a>

  <div id="ankucken">
     <img class="big" src="/image/9.png" id="bild8">
     <img class="big" src="/image/7.png" id="bild9">
     <img class="big" src="/image/2.png" id="bild10">
     <img class="big" src="/image/7.png" id="bild11">  
     <img class="big" src="/image/3.png" id="bild12">     
     <img class="big" src="/image/9.png" id="bild13">       
     <img class="big" src="/image/3.png" id="bild14">
</div>