CODEWITHSUNDEEP
htmlcsstransition
Pixelotl
Pixelotl

Reputation: 3

CSS transition effect isn't working

I'm quite a newbie to CSS and HTML, and have run into a problem that has me completely stumped - the transition effect I've applied to my navigation bar doesn't seem to be taking effect. I've searched for an answer to no avail, and feel ready to break something at this point. Below is my CSS for the navigation bar.

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    text-align: center;
}

li {
    display: inline-block;
    font-family: 'Oswald Light', Verdana, Geneva, sans-serif;
    font-size: 20px;
    background-color: #333;
    -webkit-transition: all 0.9s ease;
    -moz-transition: all 0.9s ease;
    -o-transition: all 0.9s ease;
    -ms-transition: all 0.9s ease;
    transition: all 0.9s ease;  
}

li a {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover {
    background-color: #6699cc;
}

Upvotes: 0

Views: 232

Answers (3)

Damien
Damien

Reputation: 3362

Your CSS edited :

ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
text-align: center;
}

li {
 display: inline-block;
 font-family: 'Oswald Light', Verdana, Geneva, sans-serif;
 font-size: 20px;
 background-color: #333;

}

li a {
 display: inline-block;
 color: white;
 text-align: center;
 padding: 14px 16px;
 text-decoration: none;
 -webkit-transition: all 0.9s ease;
 -moz-transition: all 0.9s ease;
 -o-transition: all 0.9s ease;
 -ms-transition: all 0.9s ease;
 transition: all 0.9s ease;
}

li a:hover {
 background-color: #6699cc;
}

Upvotes: 0

Dmitry Kholoshevsky
Dmitry Kholoshevsky

Reputation: 1

You should replace your transition code to li a{} So it'll be smth like this:

li a {
 display: inline-block;
 color: white;
 text-align: center;
 padding: 14px 16px;
 text-decoration: none;
-webkit-transition: all 0.9s ease;
 -moz-transition: all 0.9s ease;
 -o-transition: all 0.9s ease;
 -ms-transition: all 0.9s ease;
 transition: all 0.9s ease;
}

Upvotes: 0

Joey M-H
Joey M-H

Reputation: 773

You need to add the transition rules to li a - this is the element that is changing color, not the li!

See here http://jsbin.com/lufujuzuti/edit?html,css,output

Upvotes: 1

Related Questions