MS Edge hover bug

MS Edge doesn't render color transitions correctly in elements inside links

HTML

<div>
  <a href="#1">
    <span class="Bob">Bright like a diamond!</span>
    <p>Random text</p>
  </a>
  
  <a href="#2">Other random stuff, who cares...</a>
</div>

CSS

div {
  background: white;
  text-align: center;
  width: 200px;
}

div:hover .Bob {
  background-color: white;
  color: #11bba1;
  transition: all 0.5s ease 0s;
}

.Bob {
  background-color: #11bba1;
  color: white;
  display: inline-block;
  font-size: 11px;
  font-weight: bold;
  height: 20px;
  line-height: 20px;
  padding: 0 7px;
  text-transform: uppercase;
  transition: all 0.5s ease 0s;
}

div:hover a {
  background-color: #11bba1;
  color: white;
  transition: all 0.5s ease 0s;
}

a {
  color: #11bba1;
  display: block;
  font-weight: lighter;
  padding: 20px 5px;
  text-decoration: none;
  transition: all 0.5s ease 0s;
}

JavaScript

dadsdadwadadad
$('*').hide();