Question

我已经进行了转换，以便在悬停时慢慢更改导航元素的背景。但是当我拿到元素的鼠标时，它会立即将其改为之前的那个。我希望这个改变像初始过渡一样缓慢。

以下是HTML中的代码

<ul>

    <a href="#"><li><i class="home primary-nav-element"></i></li></a><!--
    --><a href="#"><li><i class="upload primary-nav-element"></i></li></a><!--
    --><a href="#"><li><i class="favs primary-nav-element"></i></li></a><!--
    --><a href="#"><li><i class="search primary-nav-element"></i></li></a>

</ul>

这是我目前拥有的CSS：

.primary-nav li:hover .home {
  background-position: 0 100%;
  -webkit-transition: background 400ms;
  -moz-transition: background 400ms;
  -o-transition: background 400ms;
  transition: background 400ms;
}

Answer 1

将转换放在.primary-nav li上，而不是：hover伪元素。

.primary-nav li {
    -webkit-transition: background 400ms;
    -moz-transition: background 400ms;
    -o-transition: background 400ms;
    transition: background 400ms;
}

.primary-nav li:hover .home {
    background-position: 0 100%;
}

我该如何扭转过渡？

1 个答案: