Html 在div中悬停div

我有两个级别相同的div，我不能更改。一个div是一个以上div的父级。我希望他们有一个悬停，但如果我悬停孩子，父母的悬停应该消失。 div由extjs自动创建，可以是2个甚至更多

<div class="x-test-container">
    <div class="x-test-container">
         <div class="x-test-container">
         </div>
    </div>
</div>

所以，如果我把内心的孩子悬停，我希望父母没有悬停。有人能帮我吗？

试试这个

jQuery（文档）.ready（函数（）{
jQuery（'.x-test-container'）.last（）.css（'background'，'green'）；
jQuery（'.x-test-container'）.last（）.hover（函数（）{
jQuery（'.x-test-container'）.last（）.css（'background'，'red'）；
});
jQuery（'.x-test-container'）.last（）.mouseout（函数（）{
jQuery（'.x-test-container'）.last（）.css（'background'，'green'）；
});
});
div{
边框：实心1px；
填充：25px；
}

这应该行得通


$（文档）.ready（函数（）{
$（“.x-test-container”）.mouseover（函数（事件）{
event.stopPropagation（）；
//将鼠标悬停时的背景色设置为所需颜色
$（this.css（'background'，'green'）；
});
$（“.x-test-container”）.mouseout（函数（事件）{
//将背景色设置为鼠标输出时所需的颜色
$（this.css（'background'，'transparent'）；
});
});
div{
边框：实心1px；
填充：25px；
}

你能给出css吗？你可以指定css。尝试使用
.class>.class
它将只对该类的第一个嵌套元素起作用，但是由于它是两次嵌套，所以您可以访问最后一个。此外，您可以使用JavaScript来完成这项工作。在何处可以更容易地指定您需要的元素，因为您可以使用第二个。但是您需要看起来很棒的
eventListener
！我们使用的是extjs，而不是jquery，但我想我可以翻译它；）非常感谢。