CODEWITHSUNDEEP
css
John
John

Reputation: 627

How do I use CSS3 transitions to fade in on hover?

I set this up: http://jsfiddle.net/yWHfK/

However, I can't get it to fade in on hover. Any ideas where I went wrong?

Upvotes: 2

Views: 844

Answers (2)

roykasa
roykasa

Reputation: 3037

you ought to do this:

.class li a:hover{
    color: #fff;
}

you can change the #fff to whatever colour you want.

Upvotes: 0

mal-wan
mal-wan

Reputation: 4476

You've listed your transition element as color (which will transition the text color), did you mean to make it background-color?

ie

a { -moz-transition:background-color .2s ease-in;-o-transition:background-color .2s ease-in;-webkit-transition:background-color .2s ease-in;background-color:#31c3e7;text-decoration:none }
#post-list { color:#fff;text-align:center }
#post-list li { border-bottom:1px solid #4d4949 }
#post-list li a { color:#fff;display:block;font-size:16px;padding:20px 0 }
#post-list li a:hover, #post-list li.current a { background-color:#3c3636 }
#post-list li a:active {  }
#post-list li a span { font-size:12px }

That works for me in Chrome.

Upvotes: 1

Related Questions