制作徽标时怕老鼠

Question

我正在尝试创建一个标记，并且＃34;跑掉＆＃34;从我头上的鼠标。我可以让右侧工作，但我无法在左侧完成相同的功能！我不担心屏幕上的徽标是否正常，但我确实希望鼠标能够从左侧或右侧移动徽标！

目前我有一个if语句，用于检测您正在接近徽标的div侧，但只有在从右侧接近时才起作用，左侧似乎不起作用，我认为这可能是一些绑定问题。鼠标悬停事件，但我知道这一点，并不完全明白这意味着什么。

＆＃13;

＆＃13;

$(document).ready(function() {
  $('.boundary').mouseover(slide);
  
  $("#logo").mouseenter(function() {
        $('.boundary').unbind("mouseover");
    });
    $("#logo").mouseleave(function() {
        $('.boundary').mouseover(slide);
    });
});

function slide() {
  var leftWidth = parseInt($('#left').css('width'));
  
var calculatedWidthL = leftWidth - 100 + "px";
var calculatedWidthL2 = leftWidth + 100 + "px";
  
  var rightWidth = parseInt($('#right').css('width'));
  
var calculatedWidthR = rightWidth - 100 + "px";
var calculatedWidthR2 = rightWidth + 100 + "px";
  
    if ($("#logo")) $("#logo").animate({
      
        left: $(this).is('#left')?"+=100px":"-=100px"
    }, "fast");
  
 if($("#right")){
   $("#right").width(calculatedWidthR2); 
   $("#left").width(calculatedWidthL); 
    }
  else if($("#left")){
   $("#left").width(calculatedWidthL2); 
   $("#right").width(calculatedWidthR); 
    }
    
    
    $('.boundry').unbind("mouseover");
}

＆＃13;

.boundary{
    height:100%;
    width:200px;
    position:absolute;
    top:0px;
    border: 1px solid black;
}

.container{
  border: 1px solid black;
  position:relative;
  width:500px;
  height:100px;
}

.logo1{
  position: absolute;
   top: 50%;
   left: 50%;
   width: 100px;
   height: 100px;
   margin-top: -50px; /* Half the height */
   margin-left: -50px; /* Half the width */
}


#left{
    left:0px;
}
#right{
    right:0px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="box" class="container">
<img id="logo" class="logo1" src="https://www.freeiconspng.com/uploads/letter-j-icon-png-24.png">
  
  <div id="skinDiv">
    <div id="left" class="boundary"></div>
    <div id="right" class="boundary"></div>
</div>
</div>

＆＃13;

＆＃13;

＆＃13;