stopPropagation() div inside div onmouseover

Question

I want to put a div inside another div, and when the user put the mouse on the parent div the two divs show up.

The problem is that when I put the mouse over the parent div the two divs show up but when I move the mouse over the child div the show() function execute it self again, how can I stop that?

HTML code:

<div id="parent" onmouseover="show(this)">
    <div id="child"></div>
</div>

JavaScript code:

function show(element) {
    setTimeout(function () {
        opacity(element)
    }, 100);
}

function opacity(element) {
    element.style.opacity = "1"
}

Answer 1

using jquery :

$('#child').hover(function(e){e.stopPropagation();});

with normal js : a simple google search for javascript stopPropagation()

Javascript : How to enable stopPropagation?

Answer 2

This can and should be solved using CSS only, without JavaScript.

Example

<div id="parent">
    Parent Text
    <div id="child">Child Text</div>
</div>

#parent {
    opacity: .2;
    transition: .1s opacity;
}

#parent:hover {
    opacity: 1;
}