JSFiddle - React, Tailwind, and code Playground

by BramVanroy

HTML

<div>
    <span>content</span>
</div>

<span>
    <a href="#" title="">test</a>
</span>

CSS

div, span {
    width: 200px;
    border: 1px solid red;
    height: 50px;
    display: block;
    margin: 20px;
}

div.has-active-child, span.has-active-child {
    border: 1px solid blue;
}

div > span, span > a {
    width: 40%;
    margin: 0 auto;
    display: block;
    border: 1px solid blue;
}

JavaScript

$("*").mousedown(function() {
    var $this = $(this),
        parent = $(this).parent();

    parent.addClass("has-active-child");
});

$("*").mouseup(function() {
    var $this = $(this),
        parent = $(this).parent();

    parent.removeClass("has-active-child");
});