0

I am trying to get a divs background color to transition and nothing seems to work. I have tried researching on here and other sites but I've found nothing that works. Any help much appreciated.

Here is the CSS:

.nav a:hover
{
    color:black;
    background-color:white;
}

.nav
{
    width:200px;
    position:relative;
    left:10px;
    top:125px;
    background-color:black;
    font-size:1.4em;
    font-family: "Trebuchet MS", "Lucida Grande", Tahoma, sans-serif;
    text-align:center;
    color:white;
    text-decoration:none;
    vertical-align:middle;
    -webkit-transition: width 2s linear;
    -moz-transition: width 2s linear;
    transition: width 2s linear;
}
rafaelncarvalho
  • 729
  • 7
  • 26
Simon
  • 25
  • 1
  • 5
  • possible duplicate of [CSS transition shorthand with multiple properties?](http://stackoverflow.com/questions/9670075/css-transition-shorthand-with-multiple-properties) – George G Nov 18 '14 at 19:27

4 Answers4

2

I see two issues here:

1) You are defining your transitions on the .nav element, but only changing the color of the a element on hover

2) You are only specifying a transition of width, not background color

Here is what you are probably looking for:

.nav a {
  -webkit-transition: all 2s linear;
  -moz-transition: all 2s linear;
  transition: all 2s linear;
} 

.nav a:hover
{
  color:black;
  background-color:white;
}


.nav
{
width:200px;
position:relative;
left:10px;
top:125px;
background-color:black;
font-size:1.4em;
font-family: "Trebuchet MS", "Lucida Grande", Tahoma, sans-serif;
text-align:center;
color:white;
text-decoration:none;
vertical-align:middle;
}
Jonathan Crowe
  • 5,793
  • 1
  • 18
  • 28
0

Here's a simple version of what you want to do that I've lifted from CSS-Tricks (http://css-tricks.com/almanac/properties/t/transition/).

http://jsfiddle.net/vp5hg339/1/

It uses CSS3 transition and ease.

nav {
  height:100px;
  width:100px;
  transition: background-color 0.5s ease;
  background-color: red;
}
nav:hover {
  background-color: green;
}
Richard Czechowski
  • 433
  • 2
  • 8
0

Here you are

.nav a{
  color: white;
  background-color: black;
  -webkit-transition: all 0.4s linear;
  -moz-transition: all 0.4s linear;
  transition: all 0.4s linear;
}
.nav a:hover {
  color: black;
  background-color: white;
}
.nav {
  width: 200px;
  position: relative;
  left: 10px;
  top: 125px;
  background-color: black;
  font-size: 1.4em;
  font-family: "Trebuchet MS", "Lucida Grande", Tahoma, sans-serif;
  text-align: center;
  color: white;
  text-decoration: none;
  vertical-align: middle;      
}
<div class="nav">
  <a href="#">Something</a>
</div>
Bojan Petkovski
  • 6,835
  • 1
  • 25
  • 34
0

Thanks for the help guys. I just had width there as I was playing with other things to get it to work and forgot to change it. As you know it was putting the transition on .nav a rather than just .nav that really did. Cheers.

Simon
  • 25
  • 1
  • 5