覆蓋：將鼠標懸停在僞元素下的元素上

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"); 
     }); 
}); 

而這裏的薩斯：

.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"); 

}); 

與此相伴的是青菜：

.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類被關閉。