Javascript/jQuery 将鼠标悬停在单独的元素上

Question

我有一个奇怪的问题，源于我无法更改布局以更好地解决此问题。

基本上我有一个像这样的菜单:

<div id="hornav">
<ul class="container">
    <li class="item1">link</li>
    <li class="item2">link</li>
</ul>
</div>

我的下拉菜单像这样分开:

 <div class="dropdowns">
     <div id="ditem1" class="dropdown-div">content</div>
     <div id="ditem2" class="dropdown-div">content</div>
 </div>

我需要做的是使链接悬停以显示容器。我可以做到这一点，但我还需要做到这一点，这样如果我将鼠标移到显示的下拉菜单上，它就不会消失。

由于网站的运行方式以及我所受工具的限制，我无法在 li 元素内制作下拉列表(它是由 CMS 动态生成的，没有任何选项) - 这一点非常重要。

现在这是我正在使用的 JavaScript 代码。它在一定程度上起作用，尽管它有很多错误(如果我将鼠标悬停在包含的元素上，然后将鼠标悬停回来它就会消失)。这段代码可能有点过时，因为我一直在逐渐尝试多种方法，并且阅读这个问题但收效甚微。

function dropdown(event,passDown){
    var classes=$(passDown).attr('class').split(' ');
    for(var i=0;i<classes.length;i++){
        if(classes[i].indexOf('item')!=-1){
            var classId=classes[i];
        }
    }
    var elem=$('#d'+classId);
    event.preventDefault();
    if(!elem.hasClass('active')){
        $('#hornav li.active,.dropdown-div.active').each(function(){
            $(this).removeClass('active');
        });
        $('#d'+classId).addClass('active');
        $(passDown).parent().addClass('active');
    }else{
        $('#hornav li.active,.dropdown-div.active').each(function(){
            $(this).removeClass('active');
        });
    }
}
 $(document).ready(function(){
    $('#hornav>ul>li[class*="item"]:not(.item20)').each(function(){ //trigger all drop down links
        $(this).hover(function(event){
            event.stopPropagation();
            console.log(event);
            var setIt=this;
            if(event.relatedTarget.id.indexOf('ditem')==-1){
                dropdown(event,this);
            }
        });
    });
    $('.dropdowns .dropdown-div').each(function(){
        $(this).hover(function(event){
            event.stopPropagation();
            console.log(event);
            var setIt=this;
            //if(event.offsetParent.className.indexOf('item')==-1){
                $('#hornav li.active,.dropdown-div.active').each(function(){
                    $(this).removeClass('active');
                });
            //}
        });
    });
});

编辑:

我们决定采取另一种方法，将使用点击而不是悬停，这不会导致问题。

我暂时保留这个问题，因为这似乎是一个可以帮助其他人解决问题的问题。

编辑2:

从未解决过这个问题，最终提出了另一个完全不同的解决方案。不过，我觉得这个问题将来可能会对人们有所帮助，所以如果有人想回答的话，我会将其保留。

Answer 1

对于每个子元素，在父元素上触发事件:

jQuery(el).on('mouseenter mouseleave', function(e) {
    jQuery(this).parent().trigger(e.type);
});