Javascript stopPropagation（）div内部div onmouseover

我想把一个div放在另一个div中，当用户将鼠标放在父div上时，两个div就会出现

问题是，当我将鼠标放在父div上时，会显示两个div，但当我将鼠标移动到子div上时，show函数会再次自行执行，我如何停止

HTML代码： 使用jquery：

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

对于普通js： 一个简单的谷歌搜索javascript stopPropagation

---

这可以而且应该只使用CSS解决，而不使用JavaScript

---

谢谢您的回复，但我不想使用jquery。

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

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

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

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