Question

我正在为学校科学项目投入一个非常快速，非常非正式的网站。但是，当我将鼠标悬停在列表项上时，列表项的转换不起作用。我想提前为凌乱的HTML / CSS道歉。

＆＃13;

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

＆＃13;

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

＆＃13;

有人可以帮我解决这个问题吗？再次，我很抱歉凌乱的代码。

Answer 1

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

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

您也不应该单独定义过渡，它应该以逗号分隔：

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

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

transition: color .5s;

CSS新手 - 过渡不起作用

1 个答案: