在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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

将链接放在div。

之外

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

Answer 3

这个CSS可以通过您提供的HTML获得您想要的内容。查看小提琴：https://jsfiddle.net/8uh2ytc4/

#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:black;
}
#checkoutbutton p {
margin: 0;
padding: 0;
}
#checkoutbutton a {
color: black;
line-height: 40px;
vertical-align: middle;
text-decoration: none;
}
li {
list-style-type: none;
}