覆盖：悬停在伪元素下的元素上

Question

在我们的菜单中，我有一个父菜单项，其子项变为橙色：悬停。我也在使用 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 类被关闭。