Javascript navigation hover effect

Question

Does anyone know how to implement the navigation hover effect displayed on this web page into my HTML/CSS document? The aforementioned page is using a WordPress theme, but I would like to add that green effect to my generic web page and be able to change the color as well.

P.S. I have never used Javascript before. (Be nice.)

It can be done by css3 transition. No need to write javascript. — Prashant
– Prashant, Commented Feb 3, 2016 at 4:38

gerrod · Accepted Answer · 2016-02-03 05:28:39Z

2

Try This:

CSS

ul li{
 list-style:none;
}
ul li a{
transition:all 0.2s ease-out;
padding:5px;
border-radius:5px
}

ul li a:hover{
  background-color:#&dcc0e;
}

HTML:

<ul>
<li>
   <a>Hello</a>
</li>
</ul>

edited Feb 3, 2016 at 5:28

gerrod

6,7276 gold badges37 silver badges49 bronze badges

answered Feb 3, 2016 at 4:45

Prashant

3852 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Pons Purushothaman · Accepted Answer · 2016-02-03 04:36:47Z

This does not need any js. You can create the effect using css transition like this.

div{
                width: auto;
                float: left;
            }
            a{
                color: red;
                text-decoration: none;
                padding: 5px 20px;
                float: left;
                position: relative;
            }
            a:hover{
                color:#FFF;
            }
            a:after{
                content: '';
                background: red;
                position: absolute;
                top: 50%;
                right: 5%;
                bottom: 50%;
                left: 5%;
                border-radius: 3px;
                transition: all .1s;
                z-index: -1;
            }
            a:hover:after{
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
            }

<div><a href="javaScript:void(0);">menu</a></div>

Collectives™ on Stack Overflow

Javascript navigation hover effect

2 Answers 2

CSS

HTML:

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

CSS

HTML:

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related