Nested Div Hover Effect

HTML

<div>
    <p>Container</p>
    <div>
        <p>Row</p>
        <div>
            <p>Col 1</p>
            <div>
              <p>Col 2</p>
              <div>
              <p>Col 2</p>
          </div>
          </div>
          <div>
              <p>Col 3</p>
          </div>
        </div>
        <div>
            <p>Col 2</p>
        </div>
        <div>
            <p>Col 3</p>
        </div>
    </div>
</div>

CSS

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

div {
    margin: 10px;
    border: 1px solid gray;
    padding: 10px;
    background: white;
}

.highlight {
    background: lightblue;
}

p {
    margin-left: 10px;   
}

JavaScript

(function($) {
    $("div").hover(
        function(e) {
            $(this).addClass('highlight').parent("div").removeClass('highlight');
        },
        function(e) {
            $(this).removeClass('highlight').parent("div").addClass('highlight');
        }
    );
})(jQuery);