My issue involves a div with the :active selector effect. Within this div, there is a smaller child div that contains some buttons.
Currently, when either the parent div or one of the buttons within the child div is clicked, the :active effect is triggered. However, I do not want this behavior as it can be quite annoying for users.
What I am seeking is for the :active effect to be activated only when the parent div is clicked and not when an element inside the child div is clicked. Is there a way to achieve this using JS or jQuery?
In the provided example below, clicking on either the div or the button results in the border turning red:
#parent-div {
border: 1px solid black;
width: 300px;
height: 300px;
}
#parent-div:active {
border: 3px solid red;
}
#child-div {
position: absolute;
top: 20px;
left: 20px;
}<div id="parent-div">
<div id="child-div">
<button>Hello</button>
</div>
</div>