Html div悬停第二个div闪烁效果问题

注意：我尝试了所有与此主题相关的问题和答案。此外，我尝试了相关的问题，并试图解决它，但没有成功。所以请仔细阅读我的问题

我尝试

一个

类悬停，然后一个类效果模糊，

第二个div

可见，但最常见的闪烁是如何解决这个问题如何停止闪烁

我想停止闪烁悬停div

注意：请运行我的示例，然后您能理解问题所在吗

代码

.root{
宽度：300px；
边框：1px纯黑；
填充物：5px；
高度：300px；
位置：相对位置；
}
.1，
.二{
宽度：250px；
高度：250px；
边框：1px纯黑；
位置：绝对位置；
顶部：5px；
左：5px；
}
1.悬停{
-webkit过滤器：模糊（13px）；
-moz滤波器：模糊（13px）；
-o-滤波器：模糊（13px）；
-ms过滤器：模糊（13px）；
过滤器：模糊（13px）；
}
.1:悬停+.2{
显示：块；
}
.二{
显示：无；
}
.changereditdiv{
位置：绝对位置；
顶部：58px；
左：87px；
宽度：150px；
}
.changeoreditdiv div{
填充：10px；
宽度：52px；
高度：16px；
边框：1px纯红；
背景：#ccc；
}

去除




改变

在您的代码中，

悬停在

和

悬停在

时出现问题

悬停

.one

时，会显示

.two

并将悬停从

.one

中删除，因为

.two

作为一个层位于

one

和

光标之间

现在根据条件
.one:hover+.two{display:block；}
.two
隐藏，这个过程正在无休止地运行

为了避免这种情况，您可以将这两个div包装在父div中，并为其提供悬停状态


.root{
宽度：250px；
边框：1px纯黑；
高度：250px；
位置：相对位置；
}
.1，
.二{
宽度：250px；
高度：250px；
边框：1px纯黑；
位置：绝对位置；
排名：0；
左：0；
}
.root:悬停，一个{
-webkit过滤器：模糊（13px）；
-moz滤波器：模糊（13px）；
-o-滤波器：模糊（13px）；
-ms过滤器：模糊（13px）；
过滤器：模糊（13px）；
}
.根：悬停，两个{
显示：块；
}
.二{
显示：无；
}
.changereditdiv{
位置：绝对位置；
顶部：58px；
左：87px；
宽度：150px；
}
.changeoreditdiv div{
填充：10px；
宽度：52px；
高度：16px；
边框：1px纯红；
背景：#ccc；
}

去除




改变
在您的代码中，
悬停在
和
悬停在
时出现问题

悬停
.one
时，会显示
.two
并将悬停从
.one
中删除，因为
.two
作为一个层位于
one
和
光标之间

现在根据条件
.one:hover+.two{display:block；}
.two
隐藏，这个过程正在无休止地运行

为了避免这种情况，您可以将这两个div包装在父div中，并为其提供悬停状态


.root{
宽度：250px；
边框：1px纯黑；
高度：250px；
位置：相对位置；
}
.1，
.二{
宽度：250px；
高度：250px；
边框：1px纯黑；
位置：绝对位置；
排名：0；
左：0；
}
.root:悬停，一个{
-webkit过滤器：模糊（13px）；
-moz滤波器：模糊（13px）；
-o-滤波器：模糊（13px）；
-ms过滤器：模糊（13px）；
过滤器：模糊（13px）；
}
.根：悬停，两个{
显示：块；
}
.二{
显示：无；
}
.changereditdiv{
位置：绝对位置；
顶部：58px；
左：87px；
宽度：150px；
}
.changeoreditdiv div{
填充：10px；
宽度：52px；
高度：16px；
边框：1px纯红；
背景：#ccc；
}

去除




改变
之所以会出现闪烁问题，是因为当您将鼠标悬停在
.one
上时，会出现两个
div（
显示：block
）并将css从
.one
中移除，产生的
。两个
div再次显示：无
和您的
。一个
悬停再次启动，此过程反复发生（永不结束的过程）

我建议在
.div的
内放置两个
div，一个
div，然后应用悬停效果。检查下面的代码片段


.root{
宽度：300px；
边框：1px纯黑；
填充物：5px；
高度：300px；
位置：相对位置；
}
.1，
.二{
宽度：250px；
高度：250px；
边框：1px纯黑；
位置：绝对位置；
顶部：5px；
左：5px；
}
.1：悬停式img{
-webkit过滤器：模糊（13px）；
-moz滤波器：模糊（13px）；
-o-滤波器：模糊（13px）；
-ms过滤器：模糊（13px）；
过滤器：模糊（13px）；
}
一：悬停，二{
显示：块；
}
.二{
显示：无；
}
.changereditdiv{
位置：绝对位置；
顶部：58px；
左：87px；
宽度：150px；
}
.changeoreditdiv div{
填充：10px；
宽度：52px；
高度：16px；
边框：1px纯红；
背景：#ccc；
}

去除




改变
之所以会出现闪烁问题，是因为当您将鼠标悬停在
.one
上时，会出现两个
div（
显示：block
）并将css从
.one
中移除，产生的
。两个
div再次显示：无
和您的
。一个
悬停再次启动，此过程反复发生（永不结束的过程）

我建议在
.div的
内放置两个
div，一个
div，然后应用悬停效果。检查下面的代码片段


.root