javascript - 覆盖 :hover on elements under pseudo element

Question

在我们的菜单中，我有一个父菜单项，它的子项在 :hover 上变为橙色。我还使用 JS 将切换按钮添加到折叠/展开菜单，但由于 span 元素位于父列表项的顶部，因此将鼠标悬停在切换按钮上会触发颜色更改。如果切换悬停，我试图找出一种方法(使用 Compass 或 jQuery)来覆盖列表上的悬停样式。

我们使用的是 Drupal，因此 HTML 相当复杂，但这是一个精简版:

<li class="menu__item is-expanded last-expanded">
  <span class="menu__link nolink">About</span>
  <span class="menu__link nolink expand"> </span> <!--put here by jQuery for the collapse and expand icon -->
  <ul class="menu">
    <li><a href="mission.html">Mission</a></li>
    <li><a href="team.html">Team</a></li>
  </ul>
</li>

这是 jQuery:

jQuery(document).ready(function(){
      $(".not-front .menu__item.is-expanded.last.expanded span").after("<span class='menu__link nolink expand'>&nbsp;</span>");
      $(".front .menu__item.is-expanded.last.expanded span").after("<span class='menu__link nolink expand collapse'>&nbsp;</span>");
      $("#block-menu-block-1 ul li li").css({ display: "block" });
      $(".not-front #block-menu-block-1 ul li li").css({ display: "none" });
      $('#block-menu-block-1 .menu__link.nolink').click(function(){
        $('#block-menu-block-1 ul li li').toggle('fast');
        $( ".menu__item.is-expanded.last.expanded span.menu__link.nolink.expand" ).toggleClass( "collapse" );
      });
 });

这是 Sass:

.menu__item:hover a,
.menu__item:hover span {
  color: $orange;
}

编辑:抱歉!我想早些时候发布一个 Sassmeister，但他们的网站已经关闭。有一个到开发站点的链接，但一旦回答就删除了。

编辑:我认为这样的事情会奏效，但事实并非如此:

jQuery(".menu__item span.expand").mouseover(function(e) {
        jQuery("menu__item:hover a, .menu__item:hover span").toggleClass( "stay-gray" );

});

随之而来的是 sass:

.menu__item:hover a,
.menu__item:hover span {
  color: $orange;
  border-color: $orange;
  &.stay-gray {
    color: $darkGray;
    border-color: $darkGray;
  }
}

Answer 1

也许您可以尝试停止在 span.expand 元素上传播事件:

$("span.expand").mouseover(function(e) {
    e.stopPropagation();
});

编辑:stopPropagating 无效。因此，重新考虑 OP 提出的想法，我们想出了这个解决方案:

添加两个新的 CSS 规则:

.stay-gray a.menu__link {
  border-bottom-color: #474E51 !important;
}
.stay-gray, .stay-gray a.menu__link {
  color: #474E51 !important;
}

然后在 jQuery(document).ready(function(){ ... 的末尾添加以下行:

toggleStayGray=function(e){ jQuery(e.target).siblings().toggleClass('stay-gray') };
jQuery('.menu span.expand').mouseover(toggleStayGray).mouseout(toggleStayGray);

这样:

jQuery(document).ready(function(){
  jQuery(".not-front .menu__item.is-expanded.last.expanded span").after("<span class='menu__link nolink expand'>&nbsp;</span>");
  jQuery(".front .menu__item.is-expanded.last.expanded span").after("<span class='menu__link nolink expand collapse'>&nbsp;</span>");
  jQuery("#block-menu-block-1 ul li li").css({ display: "block" });
  jQuery(".not-front #block-menu-block-1 ul li li").css({ display: "none" });
  jQuery('#block-menu-block-1 .menu__item.is-expanded').click(function(){
      jQuery('#block-menu-block-1 ul li li').toggle('fast');
      jQuery( ".menu__item.is-expanded.last.expanded span.menu__link.nolink.expand" ).toggleClass( "collapse" );
  });
  toggleStayGray=function(e){ jQuery(e.target).siblings().toggleClass('stay-gray') };
  jQuery('.menu span.expand').mouseover(toggleStayGray).mouseout(toggleStayGray);
});

这样，当您将鼠标悬停在 span.expand 元素上时，stay-gray 类会在其兄弟元素上打开，并且新样式会应用于它们及其 a.menu__link 后代。当鼠标离开时，stay-gray 类被关闭。