HTML按鈕上的背景懸停更改

Question

CSS懸停只改變文本的背景，而不是整個按鈕背景。有沒有辦法改變懸停按鈕的整個背景？我試着製作一個按鈕的容器並在那裏改變背景，但背景顯示爲一個矩形，我的按鈕是圓形的。

<a href="google.ca"> 
    <button class="main-button"> 
     <span>CONTACT ME</span> 
    </button> 
</a> 


.main-button{ 
    border-radius:50px; 
    border:3px solid $Green; 
    overflow:hidden; 
    color:$Green; 
    background:transparent; 
    width:20%; 
    height:8%; 
    :hover{ 
    transition: all 0.5s ease-in-out; 
    background:$Dark; 
    } 
    span{ 
    font-weight:bold; 
    font-size:120%; 
    font-family: 'Montserrat', sans-serif; 
    } 
} 

Answer 1

您必須在'：hover'之前放置'&'。固定代碼：

.main-button{ 
border-radius:50px; 
border:3px solid $Green; 
overflow:hidden; 
color:$Green; 
background:transparent; 
width:20%; 
height:8%; 
&:hover{ /* <-- HERE WAS THE MISTAKE */ 
    transition: all 0.5s ease-in-out; 
    background:$Dark; 
} 
span{ 
    font-weight:bold; 
    font-size:120%; 
    font-family: 'Montserrat', sans-serif; 
} 
} 

http://jsfiddle.net/jnzn22yb/