javascript - JQuery - 当鼠标进入/离开图像时显示隐藏按钮

Question

在我的网页中，我有一个图像，上面有一个按钮。我想在鼠标进入和离开图像时显示和隐藏按钮:

$('#UserImage').mouseenter(function()
    {
        $('#ButtonChange').show();
    }).mouseout(function()
    {
        $('#ButtonChange').hide();
    })

它正在工作，但由于当鼠标进入按钮时按钮包含在图像内，它被认为是离开图像，因此按钮被隐藏然后在按钮被隐藏的同一时刻再次触发 mouseenter 事件并且显示的按钮会产生闪烁效果

有什么解决这个问题的建议吗？

编辑:

$('#UserImage').mouseenter(function() {
  $('#ButtonChange').show();
}).mouseout(function() {
  $('#ButtonChange').hide();
})

.imageUser {
  width: 150px;
  height: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div style="position:relative;width=150px">
  <img ID="UserImage" class="imageUser" ImageUrl="~/Images/logo.jpg" />
  <input type="button" ID="ButtonChange" Text="Change" style="position: absolute;top: 180px;height:25px;left:0px;width:100px;display:none">
</div>

Answer 1

使用纯 CSS 也可以完成所有事情!对于这么简单的事情，你真的不需要 Jquery!

.imageUser {
  width: 150px;
  height: 200px;
}
.img-wrapper {
  position: relative;
  width: 150px
}
.img-btn {
  position: absolute;
  top: 180px;
  height: 25px;
  left: 0px;
  right:0; /* gave right, to align the button in center */
  margin:0 auto; /* as button as fixed width, margin aligns in center */
  width: 100px;
  display: none
}
.img-wrapper:hover .img-btn {display:block} /* whenever mouse hovers the image wrapper, the button is shown, other time, its hidden */

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="img-wrapper">
  <img ID="UserImage" class="imageUser" ImageUrl="~/Images/logo.jpg" />
  <input type="button" ID="ButtonChange" Text="Change" class="img-btn">
</div>