У вас есть ссылка внутри div. У меня нет двух состояний зависания.

Question

Я пытаюсь достичь одного состояния зависания, но я продолжаю получать два, потому что ссылка находится внутри кнопки div!

Правильное Unhovered Государство -

Некорректное парил 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 a { 
    color: #f49131; 
    vertical-align: middle; 
} 

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

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