html - CSS 新手 - 过渡不起作用

Question

我正在为一个学校科学元素构建一个非常快速、非常非正式的网站。但是，当我将鼠标悬停在列表项上时，列表项上的过渡不起作用。我想提前为凌乱的 HTML/CSS 道歉。

body {
  background-color: black;
}

header {
  background-color: #4C99FF;
  height: 10%;
  float: right;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
}
.nav-button {
  height: 90%;
  border: 1px solid white;
  border-radius: 5px;
  text-align: center;
}
#button-one {
  float: left;
}
#button-two {
  float: right;
}
.button-text {
  color: white;
  font-size: 2vw;
  border: 1px solid white;
}
.nav-list {
  list-style-type: none;
}
.nav-item {
  display: inline-block;
  color: white;
  margin-top: 3%;
  font-size: 2vw;
  border: 1px solid white;
  border-radius: 5px padding: 25px;
  -webkit-transition: color .5s;
  -webkit-transition: background-color: .5s;
  -moz-transition: color .5s;
  -moz-transition: background-color: .5s;
}
.nav-item:hover {
  color: #4C99FF;
  background-color: white;
}
#home {
  float: left;
}
#cited {
  float: right;
  margin-right: 15%;
}

<div class="container-fluid">
  <div class="row">
    <div class="col-xs-10 col-sm-8 col-md-6 col-lg-4 header">
      <!--<div class="col-xs-3 nav-button" id="button-one">
        <a href="#"><h1 class="button-text"> Home<span></span> </h1></a>
      </div>
      <div class="col-xs-3 nav-button" id="button-two">
        <h1 class="button-text"> Cited </h1> -->
      <ul class="nav-list">
        <a href="#">
          <li class="nav-item" id="home">Home</li>
        </a>
        <a href="#">
          <li class="nav-item" id="cited">Cited</li>
        </a>
      </ul>
    </div>
  </div>
</div>

有人可以帮我解决这个问题吗？再次对乱七八糟的代码深表歉意。

Answer 1

有几件事，首先你不应该为样式属性使用分号，它应该是这样的:

-webkit-transition: background-color .5s;

你也不应该单独定义转换，它应该像这样用逗号分隔:

-webkit-transition: color .5s, background-color .5s;

最后，您还应该使用 transition 样式属性，而不仅仅是 webkit 和 moz 的。

transition: color .5s;