Ly18 Ly18 - 5 months ago 10
CSS Question

Upon hovering link, css declaration doesn't work

I have this navigation links and upon hovering the last link (styled as button), I want it to have a property of bottom border of color pink instead of brown upon hover to complement the color red button. Your help is appreciated. Thanks in advance!

.header-nav a:hover {
border-bottom: 5px solid rgb(56,47,50); /*brown border-bottom*/
}

.header-nav a:last-of-type:hover {
border-bottom: 5px solid rgb(255,144,171); /*pink-border-bottom*/
}

<nav class="container header-nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#cupcakes">Cupcakes</a></li>
<li><a href="#cakes">Cakes</a></li>
<li><a href="#events">Events</a></li>
<li><a href="#contacts" class="btn nav-btn">Order Now!</a></li>
</ul>
<br>
</nav>


Here's the fiddle:
https://jsfiddle.net/ssqLspsn/

Answer

i DID IT!!! https://jsfiddle.net/Please_Reply/9hk6okpd/2/ hope this is what you want!!!

.header-nav a:hover {
    border-bottom: 5px solid rgb(56,47,50); /*brown border-bottom*/
}

.header-nav .btn:hover {
    border-bottom: 5px solid rgb(255,144,171); /*pink-border-bottom*/
}