hover事件出现闪烁

最新推荐文章于 2023-10-08 20:46:55 发布

weixin_30908649

最新推荐文章于 2023-10-08 20:46:55 发布

阅读量519

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/camile/p/6093297.html

本文介绍了解决使用jQuery实现鼠标悬停显示图层时出现的闪烁问题的方法。通过将hover替换为mouseover和mouseleave事件，实现了更平滑的过渡效果，并解决了在复杂选项卡结构中的定位问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

要得到的效果：在jx项目中，ul里面有很多个li li里面还包含一个图层（鼠标移上去图层显示出来移出隐藏）

问题：当鼠标移动上去的时候会出现闪烁。

原因：用的hover 标签鼠标移动上去li全部出现鼠标移动效果所以才会出现闪烁。

解决办法：换成mouseover和mouseleave 如：

$(function(){

$(".menu_1_1 li").mouseover(function(event) {

var index=$(this).index();
console.log(index);
$(".menu_1_1 li:eq("+ index +")").mouseover(function(){

$(".menu_1_1 li:eq("+ index +")> .i_dcod ").fadeIn();
});
$(".menu_1_1 li:eq("+ index +")").mouseleave(function(){

$(".menu_1_1 li:eq("+ index +")> .i_dcod ").fadeOut();
});

});

)}

然后接下来得问题就是点击招牌菜品 5元菜品（选项卡）。。。下面的li 鼠标移动上去就不会出现图层。原因是图层太多上面的写法不能准确的定位到选项卡里面的li 可以写成这样：

$('.i_ul li').click(function(){
var _pindex = $(this).index();
$(".i_tabbox:eq("+_pindex+") > .menu_1_1 li").mouseover(function() {
var index=$(this).index();
$(".i_tabbox:eq("+ _pindex +") > .menu_1_1 li:eq("+ index +")").mouseover(function(){
$(".i_tabbox:eq("+ _pindex +") > .menu_1_1 li:eq("+ index +")> .i_dcod ").fadeIn();
});
$(".i_tabbox:eq("+_pindex+") > .menu_1_1 li:eq("+ index +")").mouseleave(function(){
$(".i_tabbox:eq("+_pindex+") > .menu_1_1 li:eq("+ index +")> .i_dcod ").fadeOut();
});
});
})

转载于:https://www.cnblogs.com/camile/p/6093297.html