在 div 中有一个链接没有两个悬停状态答案

【问题标题】：Have a link inside a div NOT have two hover states在 div 中有一个链接没有两个悬停状态
【发布时间】：2015-04-15 10:20:40
【问题描述】：

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

【问题讨论】：

Make css :hover only affect parent element 的可能重复项

标签： html css hover

【解决方案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>

【讨论】：

【解决方案2】：

将链接放在div之外。

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

【讨论】：

【解决方案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;
}

【讨论】：