在将鼠标悬停在图像上之前，div闪烁

Question

当我将鼠标悬停在链接上时，我希望背景更改in div。我遇到的问题是，当我将鼠标悬停在链接上时，背景闪烁，然后出现新的背景。我该如何防止闪烁并保持平滑过渡。

<div id="example-bg">
  <a href="#" id="Btn-one">One</a>
  <a href="#" id="Btn-two">Two</a>
  <a href="#" id="Btn-three">Three</a>
</div>

jQuery(document).ready(function($) {
  $("#Btn-one").on("mouseover", function() {
    $("#example-bg").attr('style',  'background-image: url("/pics/pic1.jpg") !important;opacity: 1;transition: opacity 1s;background-size: 100% 100% !important;');
  });
  
  $("#Btn-two").on("mouseover", function() {
    $("#example-bg").attr('style',  'background-image: url("/pics/pic2.jpg") !important;opacity: 1;transition: opacity 1s;background-size: 100% 100% !important;');
  });
  
  $("#Btn-three").on("mouseover", function() {
    $("#example-bg").attr('style',  'background-image: url("/pics/pic3.jpg") !important;opacity: 1;transition: opacity 1s;background-size: 100% 100% !important;');
  });
});