Lösungen ,hexagons

hexagons.php

Quell Code

 <!DOCTYPE HTML>
<html lang="de">
<head>
<title>hexagons</title>
<meta charset="utf-8">
<meta name=viewport content="width=device-width, initial-scale=1">
<style>
 
h1{
color:white;
text-align:center;
width:50%;
padding:10px;
margin-left:calc(50% - 25% - 20px);
}
body{
background:green;
}

.hexagon {
  position: absolute;
  width: 100px; 
  height: 57.74px;
  background-color: #64C7CC;
  margin: 28.87px 0;
}

.hexagon:before,
.hexagon:after {
  content: "";
  position: absolute;
  width: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
}

.hexagon:before {
  bottom: 100%;
  border-bottom: 28.87px solid #64C7CC;
}

.hexagon:after {
  top: 100%;
  width: 0;
  border-top: 28.87px solid #64C7CC;
}

#all{
  height:300px;
  width:320px;
  position:absolute;
  left:500px;
  top:220px;
 
}
#a{
  position:absolute;
  top:0;
  left:55px;
  background:black;
}
#a:before {
  bottom: 100%;
  border-bottom: 28.87px solid black;
}

#a:after {
  top: 100%;
  width: 0;
  border-top: 28.87px solid black;
}
#b{
  position:absolute;
  top:0;
  left:165px;
  background:blue;
}
#b:before {
  bottom: 100%;
  border-bottom: 28.87px solid blue;
}

#b:after {
  top: 100%;
  width: 0;
  border-top: 28.87px solid blue;
}
#c{
  position:absolute;
  top:90px;
  left:110px;
  background:red;
}
#c:before {
  bottom: 100%;
  border-bottom: 28.87px solid red;
}

#c:after {
  top: 100%;
  width: 0;
  border-top: 28.87px solid red;
}

#d{
  position:absolute;
  top:90px;
  left:0px;
  background:orange;
}
#d:before {
  bottom: 100%;
  border-bottom: 28.87px solid orange;
}

#d:after {
  top: 100%;
  width: 0;
  border-top: 28.87px solid orange;
}
#e{
  position:absolute;
  top:90px;
  left:217px;
  background:yellow;
}
#e:before {
  bottom: 100%;
  border-bottom: 28.87px solid yellow;
}

#e:after {
  top: 100%;
  width: 0;
  border-top: 28.87px solid yellow;
}
#f{
  position:absolute;
  top:180px;
  left:55px;
    background:#123456;
}
#f:before {
  bottom: 100%;
  border-bottom: 28.87px solid #123456;
}

#f:after {
  top: 100%;
  width: 0;
  border-top: 28.87px solid #123456;
}
#g{
  position:absolute;
  top:180px;
  left:165px;
  background:grey;
}
#g:before {
  bottom: 100%;
  border-bottom: 28.87px solid grey;
}

#g:after {
  top: 100%;
  width: 0;
  border-top: 28.87px solid grey;
}
.beweg{
  position:absolute;
  left:105px;
  top:105px;
  animation:beweg forwards linear 1s 1 0.1s;
}

@keyframes beweg{
  0%{
    transform:scale(1);
     z-index:0;
   
  }
  100%{
    transform:scale(2);
   z-index:1;
    left:100px;
    top:100px;
  }
}

.opa{
 animation:opacity forwards linear 1s 1 0.1s; 
}

@keyframes opacity{
  0%{
opacity:1;
   
  }
  100%{
opacity:0;
  }
} 


</style>
</head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
 <body>
 <div  id="all"><div id="a"class="hexagon"></div>
 <div id="b" class="hexagon"></div>
<div id="c" class="hexagon"></div>
<div id="d" class="hexagon"></div>
<div id="e" class="hexagon"></div>
<div id="f" class="hexagon"></div>
<div id="g" class="hexagon"></div>
</div>  

 <?php echo $seitenzahler ?>
 <script>
$('.hexagon').hover(function(){
  hat=$(this).hasClass('beweg');
  
  n=this.id;
  if(n=='a'){
 $('#b,#c,#d,#e,#f,#g').addClass('opa');
  }else  if(n=='b'){
 $('#a,#c,#d,#e,#f,#g').addClass('opa');
  }else  if(n=='c'){
 $('#b,#a,#d,#e,#f,#g').addClass('opa');
  }else  if(n=='d'){
 $('#b,#c,#a,#e,#f,#g').addClass('opa');
  }else  if(n=='e'){
 $('#b,#c,#d,#a,#f,#g').addClass('opa');
  }else  if(n=='f'){
 $('#b,#c,#d,#e,#a,#g').addClass('opa');
  }else  if(n=='g'){
 $('#b,#c,#d,#e,#f,#a').addClass('opa');
  }else {}
  
 if(hat==true){
    $(this).removeClass('beweg'); 
   $('div').removeClass('opa');
  }else{
$(this).addClass('beweg');
  }
  
  
})
 
 </script>
</body>
</html>