Html 悬停动画颜色开关

我试图通过悬停来实现颜色切换，但我遇到的问题是文本（在一个范围内关闭）位于列表项中，我实现效果的唯一方法是将光标悬停在单词上，但我希望在悬停在整个列表项元素上时切换

span{
颜色：橙色；
过渡：所有0.5s缓进缓出；
字号：200；
}
保险商实验室{
文本对齐：居中；
填充顶部：20px；；
}
李{
列表样式：无；
显示：内联flex；
填充：10px 10px；
字体大小：30px；
过渡：所有0.5s缓进缓出；
边框：1px纯黑；
字体大小：300；
右边界：1px；
左边框：1px；
}
#ot{
边框顶部：1倍纯色橙色；
边框底部：1px；
左边框：1px实心橙色；
}
#ob{
边框底部：1px纯黑；
边框顶部：1px；
右边框：1px纯黑；
颜色：
}
#黑色：悬停{
颜色：黑色；
}
#ot:悬停{
边框顶部：1件纯黑；
左边框：1px纯黑；
颜色：橙色；
}
#ob:悬停{
边框底部：1px纯色橙色；
右边框：1px实心橙色；
颜色：橙色；
}

高级停车场
海滩

这就是你的意思吗

span{
颜色：橙色；
过渡：所有0.5s缓进缓出；
字号：200；
}
保险商实验室{
文本对齐：居中；
填充顶部：20px；；
}
李{
列表样式：无；
显示：内联flex；
填充：10px 10px；
字体大小：30px；
过渡：所有0.5s缓进缓出；
边框：1px纯黑；
字体大小：300；
右边界：1px；
左边框：1px；
}
#ot{
边框顶部：1倍纯色橙色；
边框底部：1px；
左边框：1px实心橙色；
}
#ob{
边框底部：1px纯黑；
边框顶部：1px；
右边框：1px纯黑；
颜色：
}
#ot:悬停#黑色，
#ob:悬停#黑色{
颜色：黑色；
}
#ot:悬停{
边框顶部：1件纯黑；
左边框：1px纯黑；
颜色：橙色；
}
#ob:悬停{
边框底部：1px纯色橙色；
右边框：1px实心橙色；
颜色：橙色；
}

高级停车场
海滩

您可以将鼠标悬停在

ob

，

ot

上，以

为目标。比如：

#ob:hover #black {
  color: black;
}

#ot:hover #black {
  color: black;
}

请看下面的代码片段：


span{
颜色：橙色；
过渡：所有0.5s缓进缓出；
字号：200；
}
保险商实验室{
文本对齐：居中；
填充顶部：20px；；
}
李{
列表样式：无；
显示：内联flex；
填充：10px 10px；
字体大小：30px；
过渡：所有0.5s缓进缓出；
边框：1px纯黑；
字体大小：300；
右边界：1px；
左边框：1px；
}
#ot{
边框顶部：1倍纯色橙色；
边框底部：1px；
左边框：1px实心橙色；
}
#ob{
边框底部：1px纯黑；
边框顶部：1px；
右边框：1px纯黑；
颜色：
}
#黑色：悬停{
颜色：黑色；
}
#ot:悬停{
边框顶部：1件纯黑；
左边框：1px纯黑；
颜色：橙色；
}
#ob:悬停{
边框底部：1px纯色橙色；
右边框：1px实心橙色；
颜色：橙色；
}
#ob:悬停#黑色{
颜色：黑色；
}
#ot:悬停#黑色{
颜色：黑色；
}

高级停车场
海滩