html - div内有链接没有两个悬停状态

我正在尝试实现一种悬停状态，但由于链接位于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;
}

最佳答案

#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>