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

你必须放一个'＆amp;'在''悬停'之前。修正了你的代码：

.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/

HTML按钮上的背景悬停更改

1 个答案: