我如何 hover/target 不是 jQuery 子元素的元素？

Question

我有一个类似于侧边栏菜单的侧边栏。

除此之外，在主要内容部分，我有另一个侧边栏，当悬停在菜单项上时我想显示它。在这个隐藏的侧边栏中，我有很多按类别排序的 div。我需要打开面板并显示正确的 div，因此当我将鼠标悬停在菜单项上时，我会定位具有相同数据 ID 的 div。我解决了，但是我无法取消悬停效果，面板保持打开状态。

我想做什么：

将鼠标悬停在菜单项上时，面板会打开并显示相关内容。当我在面板内导航时，菜单项保持活动状态 class（这没问题）。
一旦鼠标离开菜单和面板（在主体上或侧边栏的其他地方），面板就会关闭（这不行）

An example 我真正想要实现的目标（您必须稍微滚动并“跳过注册”才能看到页面）

$('.component_menu li').hover(function(){
  $('.component_menu li').removeClass('active');
  $(this).toggleClass('active');
  var id = $(this).data('id');
  $('.modules-panel__list-group').addClass('slide-lr')
  $('.modules-panel__list-group >div').each(function(){
  $(this).hide();
    if($(this).data('id') == id) {
      
      $(this).css('display','block');
      }
    })
})

.component_panel{
  background: #fff;
    height: calc(100% - 60px);
    z-index:2;
    padding:10px 0;
    margin:35px 0 0;
}
.component_menu{
  list-style:none;
  z-index:2;
  background-color:#ffffff;
  padding:10px 0;
}
.component_menu li{
  display:block;
  padding:10px;
  cursor:pointer;
  background-color:#ffffff;
}
.component_menu li.active{
  background-color: #eff3f6;
}

.component__logo,
.component__header,
.component__banner,
.component__feature,
.component__cta,
.component__footer{
     display:none;
}


.modules-panel__list-group{
    position: absolute;
    top: 35px;
    left:0;
    bottom: 0;
    width: 330px;
    height: 100%;
    margin: 0;
   padding-top:50px;
    background-color: #eff3f6;
    visibility: hidden;
    transform: translateX(-100%);
    opacity: 0;
    transition: all .5s;
    will-change: transform,opacity;
    z-index: 1;
    overflow-y: scroll
}
.modules-panel__list-group p{
      margin-bottom: 10px;
    font-size: 12px;
    font-weight: 300;
    line-height: 1.17;
    color: #727c80;
    text-align:left;
}
.modules-panel__list-group>div{
  padding:0 20px;
  text-align:center;
  margin:0 auto;
}
.modules-panel__list-group.slide-lr{
    visibility: visible;
    transform: translateX(225px);
    opacity: 1;
    max-height:600px;
  }

<div class="component_menu">
    <ul>
      <li class="component_menuitem-logo" data-id="logo">logo</li>
        <li class="component_menuitem-banner" data-id="banner">banner</li>
        <li class="component_menuitem-spacer" data-id="spacer">spacer</li>
        <li class="component_menuitem-cta" data-id="cta"> cta</li>
        <li class="component_menuitem-content" data-id="content">content</li>
        <li class="component_menuitem-feature" data-id="features">features</li>
        <li class="component_menuitem-footer" data-id="table">footer</li>
    </ul>
</div>
<div class="modules-panel__list-group">
    <div class="component__logo" data-id="logo">
        <button type="button" class="component" id="add-brand-logo-standard-right">
         <p>Brand Logo Standard Rigth</p>
         <div class="components">
         <div class="header brand-logo-standard-right"></div>
         </div>
    </button>
        <button type="button" class="component" id="add-brand-centered-logo">
            <p>HBrand centered Logo</p>
            <div class="components">
            <div class="header brand-centered-logo"></div>
            </div>
        </button>
   </div>
 </div>

Answer 1

您可以更改为：


.component_menu{
  list-style:none;
  z-index:2;
  background-color:#ffffff;
  padding:10px 0;
  width:200px; //add width what you want
}
.test{ width:400px);

和

$('.component_menu li').hover(function(){
  $('.component_menu li').removeClass('active');
  $(this).addClass('active');
  var id = $(this).data('id');
  $('.modules-panel__list-group').addClass('slide-lr');
  $('.modules-panel__list-group >div').hide();
  $('.modules-panel__list-group >div').each(function(){
  //$(this).hide();
    if($(this).data('id') == id) {
      
      $(this).css('display','block');
      }
    })
})
$(".test").mouseleave(function() { 
     $(".component_menu li").removeClass("active");
  $('.modules-panel__list-group').removeClass('slide-lr');
  $('.modules-panel__list-group >div').css({"display":"none"});
    });

让家长div喜欢

<div class="test">

** your html code **
</div>

Answer 2

好的，最后我找到了解决方案：

我将侧边栏和面板包裹在一个 div 中，并且简单地定位 div 以禁用所有事件：

$('.component_panel').mouseleave( function() { 
     $(".component_menu li").removeClass("active");
  $('.modules-panel__list-group').removeClass('slide-lr');
  $('.modules-panel__list-group >div').css({"display":"none"});
    });

<div class="flex-col-xs-2 component_panel">
  <div class="component_menu">              
      <ul>
        <li></li>
        <li></li>
        <li></li>
          </ul>
      </div>
      <div class="modules-panel__list-group">
    ...
    </div>
  </div>

我如何 hover/target 不是 jQuery 子元素的元素？

How I can hover/target elements that are not children with jQuery?

jquery

hover