Upon hovering link, css declaration doesn't work

Question

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/

https://jsfiddle.net/jbw5qdef/ You might have some conflicts in css. — Sergey Khmelevskoy, Jul 09 '16 at 11:26

nobodyshere · Answer 1 · 2016-07-09T11:38:30.013

1

I DID IT!!! Look here 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*/
}

edited Jul 09 '16 at 11:38

answered Jul 09 '16 at 11:15

nobodyshere

208
1
5

sorry, but it doesn't work. It only applied the border bottom in the whole list item not in the specified a element – Ly18 Jul 09 '16 at 11:22
Sorry I don't really understand what you are asking for? I would like to help so please upload pictures or provide a JSFiddle – nobodyshere Jul 09 '16 at 11:25
Actually could you please provide us with some code. Edit any personal details out first if you would like. – nobodyshere Jul 09 '16 at 11:26
@Ly18 sorry I forgot to tag you – nobodyshere Jul 09 '16 at 11:26
.header-nav .li:last-child a:hover is what you are looking for – Sergey Khmelevskoy Jul 09 '16 at 11:45

Sergey Khmelevskoy · Answer 2 · 2016-07-09T11:42:39.347

Try to put some class to the button (last element) You css is fine although

like

<div class="header-nav">
<a>some text</a>
<a>some text</a>
<a class="btn">some text</a>
</div>

css

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

If you want to keep your css selectors, you should select on li, not a Raplace .header-nav a:last-of-type:hover with .header-nav .li:last-child a:hover

score 1 · Accepted Answer · answered Jul 09 '16 at 11:37

1

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*/
}

answered Jul 09 '16 at 11:37

nobodyshere

208
1
5

Yay! Good luck! Please accept my answer by clicking the tick and also feel free to ask me anymore questions @Ly18 – nobodyshere Jul 09 '16 at 11:42
Thanks @nobodyshere – Ly18 Jul 09 '16 at 11:44
You're welcome!!! @Ly18 : Remember feel free to tag me in the future if you need my help to try and answer a question :) – nobodyshere Jul 09 '16 at 11:45

score 0 · Answer 4 · answered Jul 09 '16 at 11:18

0

maybe you will put id or class name for last li and make css code the specific id :)

answered Jul 09 '16 at 11:18

ahe

21
4

i did that already but it doesn't work (same property being applied). specificity sucks. kidding! just a newbie here. – Ly18 Jul 09 '16 at 11:20

score 0 · Answer 5 · edited May 23 '17 at 10:28

The best thing to do when checking which css is applied on hover is to have the hover attribute active from the console. You can do this both in firefox and chrome by going to the inspector. Here is the guide to seeing how to activate the hover attribute See :hover state in Chrome Developer Tools

As for your specific problem it would help if you also posted your html, because css will not work if you're applying the style to a wrong element.

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

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

Good Luck!

hi there! here's the html snippet:

Home

Cupcakes

Cakes

Events

Order Now!

thanks, btw! — Ly18, Jul 09 '16 at 11:32

Upon hovering link, css declaration doesn't work

5 Answers5