Have a link inside a div NOT have two hover states

Question

I'm trying to achieve one hover state, but I keep getting two because the link is inside the div button!

Correct Unhovered State - enter image description here

Incorrect hovered State - enter image description here

Correct hovered State - enter image description here

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

possible duplicate of [Make css :hover only affect parent element](http://stackoverflow.com/questions/12652525/make-css-hover-only-affect-parent-element) — michael jones, Apr 14 '15 at 23:57

score 1 · Answer 1 · answered Apr 15 '15 at 00:03

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

score 1 · Answer 2 · answered Apr 15 '15 at 00:14

1

Put the link outside the div.

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

answered Apr 15 '15 at 00:14

Alexei Darmin

2,079
1
18
30

score 1 · Answer 3 · answered Apr 15 '15 at 02:20

This CSS will get you what you want with the HTML you provided. Checkout the fiddle: 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;
}

Have a link inside a div NOT have two hover states

3 Answers3