如何在我懸停時突出顯示3行切換按鈕？

我有3行切換按鈕，當我懸停只有1行突出顯示爲藍色。當我將鼠標懸停在按鈕上時如何突出顯示3條切換線？如何在我懸停時突出顯示3行切換按鈕？

CSS

.menu-toggle-btn{cursor:pointer;width:30px;height:30px;position:fixed;top:4px;} 
.menu-toggle-btn span{background:#444;display:block;width:30px;height:4px;border-radius:5px;margin-bottom:5px;-webkit-transition: all 0.5s linear;transition:all 0.3s linear;margin-left:5px;} 
a.menu-toggle-btn span:hover{background:blue;display:block}

HTML

<a href="index.php" class="menu-toggle-btn"><span></span><span></span><span></span></a>

來源

2015-04-12 Prime

發生這種情況是因爲您在跨度上添加了懸停效果。所以當鼠標超過一個跨度時，它會變得高亮。 – Imran

變化的最後一行CSS代碼：

a.menu-toggle-btn:hover span{background:blue;display:block}

來源

2015-04-12 15:21:00 yibuyisheng

嘗試CSS的這種改變你最後一道防線。

a.menu-toggle-btn:hover > span{background:blue;display:block}

來源

2015-04-12 15:18:30 Imran

這應該工作。

由於其他css規則並不特定於'a'標籤。將其更改爲：

.menu-toggle-btn:hover span 
{ 
    background:blue; 
    display:block 
}

來源

2015-04-12 15:30:31 Raghu

如何在我懸停時突出顯示3行切換按鈕？

回答

相關問題