Hovering Animations


#1

Upon hovering over an a attribute I wish to make a thick blue line appear below the text, spreading from the center; like the animation shown in this link; http://ianlunn.github.io/Hover/ (Border Transitions >>> Underline from Center)

How can I do this, and also remove the underlining of the text when being hovered on (which is set by default)...

Here's my code:

HTML -

<body>
<div class="wholePage">
<div class="spaceAboveNav">
<!--    This takes up space above the navigation bar...-->
    </div>

<div class="container">
    <div class="navigationMenu">
        <ul class="pull-left">
        <!--        Pull this to the left...-->
            <li><a href="#">home</a></li>
            <li><a href="#">about us</a></li>
                    </ul>
                    
    

        <ul class="pull-right">
            <!--        Pull this to the right...-->
        <li><a href="#">sign up</a></li>
        <li><a href="#">log in</a></li>
                            </ul>
                        </div>
                            </div>
<div class="extraBit1">
<!--Empty Space...-->
            </div>
                                </body>
                                    </div>

CSS -

.navigationMenu a {
  color: dodgerblue;
  font-size: 13px;
  font-weight: normal;
  text-transform: uppercase;
  padding: 1px 10px;
  font-family: 'Segoe UI', Frutiger, 'Frutiger Linotype', 'Dejavu Sans', 'Helvetica Neue', Arial, sans-serif;
}

.navigationMenu li {
    display: inline;
}

.navigationMenu {
    margin-top: 10px;
    height: 45px;
    background-color: white
}

.navigationMenu ul {
    margin-left: 15px;
    margin-right: 50px;
    margin-top: 11px;
}

.spaceAboveNav {
    height: 10px;
    background-color: white;
}

.wholePage {
    background-color: blue;   
}

.extraBit1 {
    height: 5px;
}

Thanks for the help in advance! :sun_with_face:


#2

Hi Goldendraws,

If you look at the source code for hover.css, from lines 2448 to 2480, you'll be able to see the code used for that effect :)

Alternatively, you could just link up that CSS file and apply the .hvr-underline-from-center class to your <a>, and not have to copy anything :)


#3

are you sure you are not going a bit out of your league here? You can make the underline in the link away by doing:

a:hover {
  text-decoration: underline;
}

#4

I'd like to think I can try different things; rather than sticking to what I already know. This way I can learn more, and use it in other development projects. :stuck_out_tongue:

Quick question; how can I remove the underline that's originally there?

I've tried:

.divname {
    text-decoration: none;
}

and .

.divname a:hover {
    text-decoration: none;
}

and 

.divname:hover {
    text-decoration: none;
}

None of these have removed the underline...


#5

link won't inherit from it's parent, so you need both of these:

a:hover {
  text-decoration: none;
}
a {
  text-decoration: none;
}