html - Have a link inside a div NOT have two hover states -
i'm trying achieve 1 hover state, keep getting 2 because link inside div button!
correct unhovered state -
incorrect hovered state -
correct hovered state -
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 { 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 { color:white; } #checkoutbutton p { margin: 0; padding: 0; } #checkoutbutton { 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>
Comments
Post a Comment