鼠标悬停时css图像交换闪烁

Question

嗨我已经得到以下代码，但鼠标结束后图像会闪烁。 有谁知道我怎么解决这个问题？

<a href="#"  tagtype="StoreLink" title="Playstation 4"><img alt="" class="baseImage"      src="https://merchanttoolbox.play.com/resources/merchant/19825548/72356.jpg" title="" /><img  alt="" class="rollOver" src="https://merchanttoolbox.play.com/resources/merchant/19825548/72357.jpg" title="" /></a>



<style>

.rollOver {display:none;} 
.baseImage:hover {display:none;} 
.baseImage:hover~.rollOver {display: inherit;}  

</style>

Answer 1

我个人会将悬停放在父a上，因为这将始终可见，您不太可能遇到这类问题。

JSFiddle