Question

我正在为css练习建立一个网站。我发现转换属性的实例在一种情况下正常工作，但在另一种情况下却没有。这是两个实例：

＃1将图像悬停以从灰度转换为颜色：

#banner img {
z-index: -1;
max-height: 10%;
width: 100%;
padding: 0;
left: 0;

transition: filter .5s ease-in-out;
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}

然后是img：hover

#banner img:hover {
-webkit-filter: grayscale(0%);
filter: grayscale(0%);
}

这正如我所希望的那样工作。但是这里我试图在悬停时改变列表元素的颜色，当我悬停时它没有任何区别：

＆＃13;

a {
  color: gold;
  text-decoration: none;
  -webkit-transition: color 1s;
  -moz-transition: color 1s;
  -ms-transition: color 1s;
  -o-transition: color 1s;
  transition: color 1s;
}

a:hover {
  color: deeppink;
}

＆＃13;

<nav>
  <ul>
    <li><a href="#staff" id="nav1">our translators</a></li>
    <li><a href="#work" id="nav2">our work</a></li>
    <li><a href="#why" id="nav3">why choose ozeki?</a></li>
    <li><a href="#pricing" id="nav3">pricing</a></li>
    <li><a href="#contact" id="nav1">contact</a></li>
  </ul>
</nav>

＆＃13;

我试图按照我在此处找到的示例：http://jsfiddle.net/mojtaba/J6grS/1/

我之前尝试将属性更改为只有padding-bottom属性的nav li {}及其各自的nav li：hover {}（仅包含要更改的颜色）。

我在尝试中没有看到的区别是什么？任何建议表示赞赏提前谢谢您的时间。

为什么css转换工作在一个实例而不是另一个实例？

0 个答案: