CSS3转换不起作用

我试图得到一个divs的背景色过渡，似乎没有任何工作。我曾尝试在这里和其他网站上搜索，但我没有发现任何有效的方法。非常感谢您的帮助

以下是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;
}

我在这里看到两个问题：

1） 您正在

.nav

元素上定义转换，但仅更改悬停时

a

元素的颜色

2） 您只指定宽度的过渡，而不是背景色

以下是您可能正在寻找的内容：

.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;
}

---

下面是我从CSS技巧（）中提取的一个简单版本

它使用CSS3转换和易用性

nav {
  height:100px;
  width:100px;
  transition: background-color 0.5s ease;
  background-color: red;
}
nav:hover {
  background-color: green;
}

给你

.nav a{
颜色：白色；
背景色：黑色；
-webkit转换：所有0.4s线性；
-moz过渡：所有0.4s线性；
过渡：所有0.4s线性；
}
.导航a:悬停{
颜色：黑色；
背景色：白色；
}
.导航{
宽度：200px；
位置：相对位置；
左：10px；
顶部：125px；
背景色：黑色；
字号：1.4em；
字体系列：“投石机MS”，“露西达格兰德”，塔荷马，无衬线；
文本对齐：居中；
颜色：白色；
文字装饰：无；
垂直对齐：中间对齐；
}

---

谢谢大家的帮助。我只是有宽度在那里，因为我正在玩其他东西让它工作，但忘记了改变它。正如你所知，它是在.nav上进行转换，而不仅仅是.nav。 干杯。