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

在我們的菜單中，我有一個父菜單項，其子項變爲橙色：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; 
    } 
}

來源

2014-02-20 Beatrice

上面示例中的Sass不會將'a'和'span'子標記顏色更改爲'.menu__item'上的'$ orange'顏色？ – EmileKumfa

該部分正在工作，我只是想能夠覆蓋它或避免切換按鈕懸停時。 – Beatrice

您可以請發佈其他菜單，或者創建一個jsfiddle嗎？這將使我們更容易調試您的問題。 –

也許你可以嘗試停在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類被關閉。

來源

2014-02-20 21:42:42

謝謝！但是我不想要橙色的那個（當光標在切換時）是第一代跨度。 – Beatrice

也許這是另一種方式？ –

哦，我以前沒有用過星號。太棒了。但這不是風格不適用，而是它正在應用，我不希望當鼠標懸停在span.expand上時。 – Beatrice

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

回答

相關問題