html - 在 div 中有一个链接 没有两个悬停状态

Question

我试图实现一种悬停状态，但我一直得到两种悬停状态，因为链接位于 div 按钮内!

正确的未悬停状态 -

不正确的悬停状态 -

正确的悬停状态 -

HTML -

<li>
    <div id="checkoutbutton">
      <p><a href="somegoogle.com">Print Pages</a></p>
    </div>
</li>

CSS-

#checkoutbutton {
  width: 137px;
  height: 40px;
  background-color: #ffffff;
  moz-border-radius: 15px;
  -webkit-border-radius: 15px;
  border: 1px solid #f49131;
  padding: 5px;
  color: #f49131;
}

#checkoutbutton:hover {
  background-color: #f46800;
  color:white;
}

#checkoutbutton a {
  color: #f49131;
  vertical-align: middle;
}

Answer 1

#checkoutbutton {
    width: 137px;
    height: 40px;
    background-color: #ffffff;
    border-radius: 15px;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    border: 1px solid #f49131;
    padding: 5px;
    color: #f49131;
    text-align:center;
    cursor:pointer;
}
#checkoutbutton:hover {
    background-color: #f46800;
}
#checkoutbutton:hover a {
    color:white;
}
#checkoutbutton p {
    margin: 0;
    padding: 0;
}
#checkoutbutton a {
    color: #f49131;
    line-height: 40px;
    vertical-align: middle;
}
#checkoutbutton a:hover {
    color:white;
}

<li>
    <div id="checkoutbutton">
        <p><a href="somegoogle.com">Print Pages</a>
        </p>
    </div>
</li>