javascript - 为什么悬停对 child 不起作用，而是对 parent 起作用​​？

Question

我希望在悬停子元素 .menuitems 时执行某些操作。目前，我已将操作替换为 alert 以使其变得简单。 现在的问题是，当我使用选择器(“#result_row .menuitems”)时，没有任何效果。但是如果我使用 ("#result_row")，它工作正常，即警报工作。

为什么会这样？它应该在两种情况下都有效？我希望悬停对 child 和孙子 (.menu1) 都有效。

这是我的代码:

HTML

<div id="result_row"><div class="menuitems">
    <div class="menu1">sfsdsf<span id="srno">4</span></div>
    <div class="menu2">sfsdfs@saf</div>
    <div class="menu3">sdfsdf<span id="cross">X</span></div>
    <div class="clear"></div>
    </div>
</div>

CSS

.menuitems{
    margin-bottom: 5px;
    background: #007fad;
}
.resultmenu > .menuitems{
    background: #004068;
}
.menuitems div{
    background: #00aeef;
    color: white;
    font-family: sans-serif;
    text-align: center;
    font-size: 14px;
    padding-top: 3px;
    padding-bottom: 3px;
    position: relative;
}
.menu1{
    float: left;
    width: 25%;
    margin-right: 2px;
}
.menu2{
    float: left;
    width: 40.4%;
}
.menu3{
    float: right;
    width: 34%;
}
.clear{
    clear: both;
    padding: 0 !important;
}

JavaScript

$(document).ready(function(){
    $("#result_row .menuitems").hover(function(){
        //var tarparent=$(event.target).parent().find("#cross");
        //$(tarparent).toggle();
        alert("Hello");
    });
});

注意:此代码无法正常呈现，因为它缺少许多其他样式、父元素等。所以我放了一张屏幕截图来描述问题。

红色矩形是.result_row。绿色是 child ，.menuitems。

编辑: 如果您想了解其他信息，请看这里:当我在 CSS(而非 jQuery)中使用 .menuitems:hover 时，悬停有效。

编辑 2:

回答时对您来说可能很重要的另一件事是:打开主页(站点)时，您在此图像中看到的窗口“EMAIL”未加载。它仅在我单击页面上的按钮时加载，并且您在第 2 行和第 3 行看到的内容会随之加载，即它们不是静态的!

Answer 1

我把你所有的东西都输入了 jsfiddle，它起作用了(按 F12 查看 console.log)

https://jsfiddle.net/bLjmocza/

我也换了

$("#result_row .menuitems").hover(function(){

与

$(".menuitems").hover(function(){

因为这似乎更符合您最初想要实现的目标