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

Popular posts from this blog

css - SVG using textPath a symbol not rendering in Firefox -

Java 8 + Maven Javadoc plugin: Error fetching URL -

order - Notification for user in user account opencart -