Html 将高光悬停在分层div上

当鼠标悬停在

div上时，很容易突出显示它

但是，当
div
s彼此位于内部时，父级会在
div
s的其余部分上着色。我应该如何告诉CSS只在直接悬停的
div
上悬停

当我将鼠标悬停在鹦鹉上方时，我不想突出显示鸟或动物


div.create{
保证金：5px；
填充物：5px；
边框：1px实心；
}
分区生物：悬停{
背景：#ffeeaa；
}

动物
哺乳动物
猫
鸟
鹦鹉
鸭子
像这样的东西

更新：添加了jQuery函数


$（函数（）{
$（'div'）。on（'mouseover'，函数（e）{
e、 停止传播（）；
$（this.addClass（'my-bg'）；
}).on（'mouseout'，函数（e）{
$（this.removeClass（'my-bg'）；
})
});
div.create{
保证金：5px；
填充物：5px；
边框：1px实心；
}
.我的背景{
背景色：#ffeeaa；
}

动物
哺乳动物
猫
鸟
鹦鹉
鸭子
这是我能得到的最接近的。我曾经

剩下的问题是当它的一个子项处于
：hover
状态时关闭父背景，我认为CSS不支持这种状态，因为它

用JS解决这个问题应该不会太难


div.fruit{
保证金：5px；
填充物：5px；
边框：1px实心；
背景：白色；/*否则div没有背景*/
}
.水果：悬停{
背景：红色；/*主父div*/
}
.fruit>div:n类型（1）：悬停{
背景：蓝色；/*第一儿童组*/
}
.fruit>div:n类型（1）：悬停>div:n类型（1）：悬停{
背景：绿色；/*第一个孙子分区*/
}
.fruit>div:n类型（2）：悬停{
背景：黄色；/*第二个子分区*/
}
.fruit>div:n类型（3）：悬停{
背景：橙色；/*第三个子分区*/
}
A1
AA1
AAA1
AA2
他们正在做你想做的事情。您只是忘了为它们设置背景色，所以它们会一直显示到下面的div。这是一把小提琴，展示了这一点：

div.creature{
  margin:5px;
  padding:5px;
  border: 1px solid;
  background: #F3F5F6
}
div.creature:hover{
  background: #FFEEAA;
}

非常感谢。有两个问题。我希望，在
鸟
或
哺乳动物
自身上悬停，突出显示它们的整个
div
。
div
s也是动态创建的。因此，我不知道提前用CSS写些什么。我已经更新了我的答案。现在它正按照您的期望工作。添加了一个额外的jQuery函数，所以不要忘记在项目中包含jQuery文件。非常感谢。如果我动态地向
div
添加内容，是否需要再次运行jquery代码？对于您的问题，不需要再次调用脚本。只要把它包括在你的项目中，它就会很好地工作。请接受我的回答，如果它解决了你的问题：）我需要再次调用命令。多个事件调用是否覆盖或累积？误读您的问题陈述-当您在子容器中时，看起来您实际上不希望突出显示父容器。