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

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

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

它正在工作，但当鼠标进入按钮时，按钮包含在图像中，因此按钮被视为离开图像，因此按钮被隐藏，然后在按钮被隐藏的同时，再次触发mouseenter事件，并显示按钮，导致闪烁效果

有解决这个问题的建议吗

编辑：

$（'#UserImage'）.mouseenter（函数（）{
$（“#按钮更改”）.show（）；
}).mouseout（函数（）{
$（“#按钮更改”）.hide（）；
})

.imageUser{
宽度：150px；
高度：200px；
}

---

将mouseenter更改为mouseover

查看页面底部的示例。

试试这个

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

整个事情也可以与纯CSS！对于这样简单的事情，您并不真正需要Jquery！

.imageUser{
宽度：150px；
高度：200px；
}
.img包装{
位置：相对位置；
宽度：150像素
}
.img btn{
位置：绝对位置；
顶部：180像素；
高度：25px；
左：0px；
右键：0；/*右键，使按钮居中对齐*/
边距：0自动；/*作为固定宽度的按钮，边距在中心对齐*/
宽度：100px；
显示：无
}
.img wrapper:hover.img btn{display:block}/*每当鼠标悬停在图像包装上时，按钮都会显示，其他时间则显示其隐藏的*/

是否尝试悬停

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

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

---

Fiddle:

制作一个Fiddle请编写一个代码段请将这种回答作为注释发布。这不是答案！