div onmouseover中的stopPropagation（）div

Question

我想将div放在另一个div中，当用户将鼠标放在父div上时，两个div显示出来。

问题在于，当我将鼠标放在父div上时，两个div显示出来，但是当我将鼠标移到子div上时，show（）函数再次执行它，我该怎么办呢？

HTML code：

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

JavaScript代码：

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

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

Answer 1

使用jquery：

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

与正常的js： 一个简单的谷歌搜索javascript stopPropagation（）

Javascript : How to enable stopPropagation?

Answer 2

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

<强> Example

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

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

#parent:hover {
    opacity: 1;
}