Style childmost hovered element

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:

<!-- language: lang-css -->

: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.

<!-- begin snippet: js hide: true --> <!-- language: lang-css -->

:hover {
  border: 1px solid blue !important;
}

<!-- language: lang-html -->

<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>

<!-- end snippet -->

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?

Found a solution using jQuery'smouseenter/mouseleave:

<!-- begin snippet: js hide: false --> <!-- language: lang-js -->

$("*")
    .mouseenter(function(){
        $(this).addClass("hovered");
        $(this).parents(".hovered").removeClass("hovered"); 
    })
    .mouseleave(function(){
        $(this).removeClass("hovered");
        $(this).closest(":hover").addClass("hovered");
     });

<!-- language: lang-css -->

.hovered {
    border: 1px solid blue !important;
}

<!-- language: lang-html -->

<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>

<!-- end snippet -->