Question

我试图让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;
}

Answer 1

我在这里看到两个问题：

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

Answer 2

这是我想要做的一个简单版本，我已经从CSS-Tricks（http://css-tricks.com/almanac/properties/t/transition/）中解脱了。

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

它使用CSS3过渡和轻松。

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

Answer 3

你在这里

＆＃13;

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

＆＃13;

<div class="nav">
  <a href="#">Something</a>
</div>

＆＃13;

Answer 4

感谢帮助人员。我只是在那里有宽度，因为我正在玩其他东西让它工作，忘了改变它。正如你所知道的那样，正在将转换放在.nav而不仅仅是.nav上。欢呼声。

CSS3过渡不起作用

4 个答案: