如何改變DIV懸停跨度顏色

如何使紅色漢堡包按鈕（這是跨度）來改變顏色爲黑色div的懸停

PS：現在也能用於跨度的懸停

的jsfiddle：https://jsfiddle.net/bjjbqct8/

.mobile-nav-toggle { 
 
    height: 50px; 
 
    width: 35px; 
 
    margin-right: 31px; 
 
    background: #ddd; 
 
    display: flex; 
 
    align-items: center; 
 
    cursor: pointer; } 
 
    .mobile-nav-toggle span, 
 
    .mobile-nav-toggle span::before, 
 
    .mobile-nav-toggle span::after { 
 
     border-radius: 2px; 
 
     content: ""; 
 
     display: block; 
 
     height: 6px; 
 
     width: 100%; 
 
     background: rgba(177, 66, 66, 0.8); 
 
     position: relative; } 
 
    .mobile-nav-toggle span::before { 
 
     top: 11px; } 
 
    .mobile-nav-toggle span::after { 
 
     bottom: 17px; } 
 
     .mobile-nav-toggle span:hover, 
 
     .mobile-nav-toggle span:hover:before, 
 
     .mobile-nav-toggle span:hover:after { 
 
      background: rgba(0, 0, 0, 0.8); }

<div class="mobile-nav-toggle"> 
 
    <span></span> 
 
</div>

來源

2015-10-05 sparrow

使用懸停psuedo選擇器爲div而不是span。

這是你需要使用

.mobile-nav-toggle:hover span, 
    .mobile-nav-toggle:hover span::before, 
    .mobile-nav-toggle:hover span::after { 
     background: rgba(0, 0, 0, 0.8); }

Here是小提琴的選擇。

來源

2015-10-06 05:48:01

謝謝Laxmikant丹哥，請問你爲什麼包括2列相鄰，而不是隻有1 因爲它只有一個列的作品，以及。你能給我投票嗎？ – sparrow

嗨Laxmikant Dange，當你寫評論時，你怎麼做線路制動？謝謝 – sparrow

@sparrow，請參考https://developer.mozilla.org/en-US/docs/Web/CSS/%3A%3A之後 –

更改hover規則，

從這個：

.mobile-nav-toggle span:hover, 
.mobile-nav-toggle span:hover:before, 
.mobile-nav-toggle span:hover:after { 
    background: rgba(0, 0, 0, 0.8); 
}

這樣：

.mobile-nav-toggle:hover span, 
.mobile-nav-toggle:hover span:before, 
.mobile-nav-toggle:hover span:after { 
    background: rgba(0, 0, 0, 0.8); 
}

原因：當你創建的span及其僞元素hover的規則，只有你懸停的那些人才會應用這些樣式。你需要的是在div上創建一條規則，這樣，無論你何時在div上hover，孩子都可以得到樣式。

來源

2015-10-06 05:48:12 Abhitalks

謝謝Abhitalks，你的回答正是我一直在尋找的。你能給我投票嗎？它有幫助，再次感謝你 – sparrow

這會工作，

.mobile-nav-toggle:hover span, 
.mobile-nav-toggle:hover span:before, 
.mobile-nav-toggle:hover span:after, 
.mobile-nav-toggle span:hover, 
.mobile-nav-toggle span:hover:before, 
.mobile-nav-toggle span:hover:after { 
background: rgba(0, 0, 0, 0.8); }

來源

2015-10-06 05:48:14

謝謝桑傑Bhardwaj，你的答案也做這項工作，它不像Abhitalks的和Laxmikant Dange'e的答案那樣優雅，但另一方面，它給了我一個想法，如何分別改變div和span的顏色你能給我投票嗎？ – sparrow

也謝謝你，我已經瞭解到兩個單獨的懸停管理。我投票給你。 –

如何改變DIV懸停跨度顏色

回答

相關問題