Style childmost hovered element - html

Question

I'm trying to recreate something like the chrome developer tools element inspector, wherein I can get the element that's currently being hovered.
I want to add a hover effect to every element on the page sort of like this:
:hover {
border: 1px solid blue !important;
}
But the problem is that it'll show me every single parent element up until that point since they are also being hovered.
:hover {
border: 1px solid blue !important;
}
<div>1
<div>1.1
<div>1.1.1</div>
<div>1.1.2</div>
</div>
<div>1.2
<div>1.2.1</div>
<div>1.2.2</div>
</div>
</div>
Since there is no parent selector, I can't check to omit elements that have children that have the :hover property.
I can't use :last-child as the lowest level element may be a grandchild.
Any ways to style just the child-most element being hovered?

Answer 1

Found a solution using jQuery'smouseenter/mouseleave:
$("*")
.mouseenter(function(){
$(this).addClass("hovered");
$(this).parents(".hovered").removeClass("hovered");
})
.mouseleave(function(){
$(this).removeClass("hovered");
$(this).closest(":hover").addClass("hovered");
});
.hovered {
border: 1px solid blue !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>1
<div>1.1
<div>1.1.1</div>
<div>1.1.2</div>
</div>
<div>1.2
<div>1.2.1</div>
<div>1.2.2</div>
</div>
</div>