Html 防止从错误元素触发的悬停效果

.dropbtn按钮附加了样式，因此当它悬停在上面时，通过向该元素添加不透明度来显示.dropdown内容div。但是，将鼠标悬停在按钮下方显示.dropdown内容的位置似乎会触发仅当我将鼠标悬停在.dropbtn上时才会发生的悬停。为什么会这样

有一些“解决方案”，比如在.dropdown中添加overflow:hidden，然后用鼠标悬停将其添加回来，但它会影响我附加到.dropdown内容的转换。添加display:none和display:block到。下拉内容也会破坏我想要的变换效果

*{
字体系列：无衬线；
}
身体{
背景图像：线性渐变（向右，#42b4ce，#fd3838）；
}
.dropbtn{
背景：无；
颜色：白色；
字体大小：16px；
边界：无；
光标：指针；
填充：0 10px；
}
.下拉列表{
位置：相对位置；
宽度：160px；
保证金：0自动；
显示：块；
}
.下拉内容{
不透明度：0；
位置：绝对位置；
背景色：#f1f1；
最小宽度：400px；
右：-80px；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
z指数：-1；
变换原点：顶部中心；
变换：旋转3d（-40,4,1.5,45度）；
过渡：.2s；
边界半径：10px；
}
.下拉内容a{
颜色：黑色；
填充：10px 14px；
文字装饰：无；
显示：块；
}
.dropdown内容a:悬停{颜色：紫色；}
.下拉：悬停.下拉内容{
不透明度：1；
变换：旋转3d（0,0,0,40度）；
z指数：0；
}
.dropdown:hover.dropbtn{文本阴影：1px 1px 2px rgba（0,0,0.6）}

下拉列表
一个想法是简单地增加主体的高度，使元素位于主体的后面，因为它具有负的
z-索引


*{
字体系列：无衬线；
}
身体{
背景图像：线性渐变（向右，#42b4ce，#fd3838）；
保证金：0；
高度：100vh；
}
.dropbtn{
背景：无；
颜色：白色；
字体大小：16px；
边界：无；
光标：指针；
填充：10px；
}
.下拉列表{
位置：相对位置；
宽度：160px；
保证金：0自动；
显示：块；
}
.下拉内容{
不透明度：0；
位置：绝对位置；
z指数：-1；
背景色：#f1f1；
最小宽度：400px；
右：-80px；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
变换原点：顶部中心；
变换：旋转3d（-40,4,1.5,45度）；
过渡：.2s；
边界半径：10px；
}
.下拉内容a{
颜色：黑色；
填充：10px 14px；
文字装饰：无；
显示：块；
}
.dropdown内容a:悬停{颜色：紫色；}
.下拉：悬停.下拉内容{
不透明度：1；
变换：旋转3d（0,0,0,40度）；
z指数：0；
}
.dropdown:hover.dropbtn{文本阴影：1px 1px 2px rgba（0,0,0.6）}

下拉列表
添加
可见性：隐藏
到
.dropdown content
类和
可见性：悬停
.dropdown
时可见。请参阅下面的代码


*{
字体系列：无衬线；
}
身体{
背景图像：线性渐变（向右，#42b4ce，#fd3838）；
}
.dropbtn{
背景：无；
颜色：白色；
字体大小：16px；
边界：无；
光标：指针；
填充：0 10px；
}
.下拉列表{
位置：相对位置；
宽度：160px；
保证金：0自动；
显示：块；
}
.下拉内容{
不透明度：0；
位置：绝对位置；
背景色：#f1f1；
最小宽度：400px；
右：-80px；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
z指数：-1；
变换原点：顶部中心；
变换：旋转3d（-40,4,1.5,45度）；
过渡：.2s；
边界半径：10px；
可见性：隐藏；
}
.下拉内容a{
颜色：黑色；
填充：10px 14px；
文字装饰：无；
显示：块；
}
.dropdown内容a:悬停{颜色：紫色；}
.下拉：悬停.下拉内容{
不透明度：1；
变换：旋转3d（0,0,0,40度）；
z指数：0；
能见度：可见；
}
.dropdown:hover.dropbtn{文本阴影：1px 1px 2px rgba（0,0,0.6）}

下拉列表
只需添加
指针事件：无用于
。下拉内容
和
指针事件：选择器的自动
。下拉：悬停。下拉内容