改變懸停的按鈕顏色

美好的一天！我意識到這個問題已被多次提出。我在這裏查了一些線程，但他們似乎不夠，所以我決定創建一個新的線程。長話短說這是我第二天學習HTML5，CSS3和JavaScript。我正想用閃亮的按鈕創建菜單。改變懸停的按鈕顏色

這裏的情況如下：按鈕顯示爲他們應該，當鼠標懸停在他們的顏色不變。我將發佈整個源代碼。裏面有一些註釋可以幫助更好地理解代碼。

的全部源代碼：

<!DOCTYPE html> 

<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta charset="utf-8" /> 
<style> 

    ul { 
     list-style: none; 
     margin: 40px 0; 
    } 
    li { 
     float : left; 

     } 
    /*This will style the buttons*/ 
    .buttonStyle { 
     width : 60px; 
     height : 20px; 
     -moz-border-radius: 2px; 
     -webkit-border-radius: 2px; 
     } 
    /*This should make them change their color when they are hovered*/ 
    a.buttonStyle:hover { 
     background: #383; 
    } 
</style> 
</head> 
<body> 
    <!-- custom made list to store the buttons--> 
    <ul > 
     <!-- Just some buttons to make it look like a menu--> 
     <li><input type="button" class="buttonStyle" /></li> 
     <li><input type="button" class="buttonStyle"/></li> 
     <li><input type="button" class="buttonStyle"/></li> 
     <li><input type="button" class="buttonStyle"/></li> 
     <li><input type="button" class="buttonStyle"/></li> 
    </ul> 
</body> 
</html>

來源

2013-06-20 Bloodcount

你hover樣式看起來是這樣的：

a.buttonStyle:hover { background: #383; }

所以它是專門爲<a>標籤設置。改變你的風格

.buttonStyle:hover { background: #383; }

因此，你設置懸停只在特定的類。然後它工作。

查看此jsFiddle的演示。

來源

2013-06-20 16:42:16 Ryan

這解決了我的問題，謝謝！當計時器讓我的時候，我會設置這個答案。再次感謝！ – Bloodcount

@Bloodcount從邊框半徑中移除供應商前綴。他們不再支持。所以'-moz-border-radius' - >'border-radius'。 –

會不會，謝謝！ – Bloodcount

改變懸停的按鈕顏色

回答

相關問題