Javascript 在元素悬停时闪烁，同时尝试缩小它'；在同一事件上的大小

下面是一个例子，看看它的实际效果。要复制它，请确保从侧面（即从右侧和左侧）将光标输入元素内部。我知道为什么会发生这种情况，只是想要一个优雅的解决方案。

我会将其包装在包装器元素中：

var$el=$（“#包装器”）
var$wrapper=$el.find（'.handle content'）；
var changeContent=函数（内容）{
$wrapper.fadeOut（50，函数（）{
$wrapper.html（''+content+''）.fadeIn（50）；
});
};
var标签转换器=功能（关闭、打开）{
$el.off（'mouseenter'）。off（'mouseleave'）；
$el.on({
鼠标指针：函数（e）{
更改内容（on）；
$（this）.find（“.book按钮句柄”）.animate({
“宽度”：“50%”，
“高度”：“15px”，
“颜色”：“白色”，
“背景色”：“黑色”
}, 50);
$（'.log'）.append（'
enter
'）；
},
鼠标移动：功能（e）{
更改内容（关闭）；
$（this）.find（“.book按钮句柄”）.animate({
“宽度”：“100%”，
“高度”：“15px”，
“颜色”：“黑色”，
“背景色”：“白色”
}, 50);
$（'.log'）.append（'
leave
'）；
}
});
};
标签转换器（“+”，“更多选项”）
#包装器{
利润率：10px自动0px；
宽度：70%；
高度：15px；
背景：黄色；
}
.书本按钮手柄{
保证金：0自动；
宽度：100%；
高度：15px；
边框：1px纯银；
字号：10pt；
线高：15px；
颜色：黑色；
文本对齐：居中；
}

+ 

试试这个


var$el=$（'.book按钮句柄'）
var$wrapper=$el.find（'.handle content'）；
var enter=false；
var exit=false；
var changeContent=函数（内容）{
$wrapper.fadeOut（50，函数（）{
$wrapper.html（''+content+''）.fadeIn（50）；
});
};
var标签转换器=功能（关闭、打开）{
$el.off（'mouseenter'）。off（'mouseleave'）；
$el.on({
鼠标指针：函数（e）{
如果（！$（this）.is（':animated'）&&&！enter）{
更改内容（on）；
$（此）。设置动画({
“宽度”：“50%”，
“高度”：“15px”，
“颜色”：“白色”，
“背景色”：“黑色”
}, 50);
$（'.log'）.append（'
enter
'）；
输入=真；
退出=假；
} 
},
鼠标移动：功能（e）{
如果（！$（this）.is（':animated'）&&&！exit）{
更改内容（关闭）；
$（此）。设置动画({
“宽度”：“70%”，
“高度”：“15px”，
“颜色”：“黑色”，
“背景色”：“白色”
}, 50);
$（'.log'）.append（'
leave
'）；
输入=假；
退出=真；
}
}
});
};
标签转换器（“+”，“更多选项”）
.book按钮手柄{
利润率：10px自动0px；
宽度：70%；
高度：15px；
边框：1px纯银；
字号：10pt；
线高：15px；
颜色：黑色；
文本对齐：居中；
}

+ 

这是因为两个元素的宽度不同。一旦鼠标进入，元素的大小将调整为50%，从而触发mouseleave事件您想防止闪烁吗？@VickyGonsalves我知道原因，但需要一个解决方案。@kpucha是的，我想阻止它。@Suraj我添加了一个带有更改的答案，以防止闪烁。谢谢你的回答，但当你从下方缓慢移动光标时，仍然会闪烁。这只是一个想法。你看不到任何其他东西，你可以在那里设置一个高度。你的想法确实解决了问题。但我希望通过保持HTML结构不变。您可以使用css或js来获得答案。谢谢您的回复。在您的解决方案中，当我从侧面移动光标时，它会收缩，但当我移出时，它不会向后扩展。为此，我需要将光标移到收缩元素内，然后移出。如果您需要在离开前一个“大空间”时触发事件，则应使用@Jai的答案
$myPseudoEl.on({
    mouseenter: function (e) {
            $(this).animate({
                'width': '50%'
            }, 50);
        }
    },
    mouseleave: function (e) {
          $(this).animate({
              'width': '70%'
          }, 50);
        }
    }
});