鼠标悬停时更改href属性时，Firefox状态无法正确更新

Question

如果在包含跨度的鼠标悬停时更新了包含锚的href属性，如下面的示例所示，则Firefox状态栏将不会显示正确的URL。

$(document).ready(function() {
 	let lastHovered = "" 
	$('span').on('mouseover', function(e) {
  	var href = $(this).data('href')
    if (lastHovered !== href) {
        lastHovered = href
				$(this).closest('a').prop('href', href)
        $('.url-display span').html($(this).closest('a').prop('href'))
    }
  })
})

.span1 {
  background:red;
}
.span2 {
  background:blue;
}
.span3 {
  background:green;
}
span {
  width:20px;
  height:20px;
  display:inline-block;
  margin-right:10px;
}
a {
  text-decoration: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<h2>
Firefox hover test to update href of containing anchor.
</h2>
<a href="#">
  <span class="span1" data-href="http://www.google.com"></span>
  <span class="span2" data-href="http://www.facebook.com"></span>
  <span class="span3" data-href="http://www.twitter.com"></span>
</a>
<div class="url-display">
   Url value:
   <span></span>
</div>

如果您使用Firefox尝试上述代码段，则会注意到状态栏仅在将鼠标悬停在下一个跨度之后才会更新。包含锚点的实际href属性每次都会正确更新。

想知道为什么会发生这种情况！