为什么div：在覆盖图像时悬停闪烁？

Question

有许多关于如何阻止这种情况发生的教程，但是到目前为止我没有尝试过。如果有人能够解释闪烁发生的原因，我会很感激，也许我可以找到更合适/更容易的解决方案。

这是我的代码：

#Logo {
  content: url('logoWhite.png');
  margin: auto;
  width: 8%;
  height: 8%;
  display: inline;
  padding: 0px 10px;
  vertical-align: center;
}
#Logo:hover {
  content: url('logoPink.png');
}

<div id="Logo"></div>