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>

Answer 2

尝试悬停？

$("#UserImage").hover(function () {
    $('#ButtonChange').show();
}, function () {
    $('#ButtonChange').hide();
});

我没有图像所以我做了一个div。见下面的小提琴。

小提琴：https://jsfiddle.net/9koswww1/1

Answer 3

将mouseenter更改为mouseover。

https://api.jquery.com/mouseenter/ 查看页面底部的示例。

Answer 4

试试这个

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