Почему не работают события hover?

body { 
  margin: 0; 
} 
 
.way1, 
.way2, 
.way3 { 
  position: absolute; 
  background-size: 80%; 
  background-position: bottom; 
  width: 100%; 
  height: 50% 
} 
 
.way1 { 
  background: red; 
  top: -5px; 
} 
 
.way2 { 
  background: green; 
  bottom: 0; 
  right: 50%; 
  margin-top: 5px; 
  margin-right: 3px; 
} 
 
.way3 { 
  background: blue; 
  bottom: 0; 
  left: 50%; 
  margin-top: 6px; 
  margin-left: 3px; 
} 
 
.center { 
  width: 100px; 
  height: 100px; 
  transform: rotate(45deg); 
  background: #e6e6e6; 
  position: absolute; 
  top: -6px; 
  bottom: 0; 
  left: 0; 
  right: 0; 
  margin: auto; 
  animation: pulse 2s infinite, pulse2 2s infinite; 
} 
 
.arrow { 
  transition: 2s; 
  border-radius: 50%; 
  width: 10px; 
  height: 80px; 
  background: #000; 
  position: absolute; 
  top: 0; 
  bottom: 0; 
  left: 0; 
  right: 0; 
  margin: auto; 
} 
 
.way1:hover~.arrow { 
  transform: rotate(0deg); 
} 
 
.way2:hover~.arrow { 
  transform: rotate(135deg); 
} 
 
.way3:hover~.arrow { 
  transform: rotate(225deg); 
}

<div class="way1"></div> 
<div class="way2"></div> 
<div class="way3"></div> 
<div class="center"></div> 
<div class="arrow"></div>