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类将关闭。

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

1 个答案: