html - CSS ":visited :hover"-疯狂

Question

我有一个ul、链表元素和无链接的li。

    <nav>
    <ul>
        <li><a href="">Home</a></li>
        <li><a href="">Test1</a></li>
        <li>second_level</li>
            <ul>
                <li><a href="">1</a></li>
                <li><a href="">2</a></li>
                <li><a href="">3</a></li>
                <li><a href="">4</a></li>
            </ul>
        <li><a href="">Test2</a></li>
    </ul>
 </nav>   

我想做的是在这个 ul 中制作所有东西，获取这些属性(无论链接是否被访问都无关紧要)

color:#fff; background-color:#ff6600;

当悬停时。(当什么都没发生时，它的 color:#ff6600; background-color:#fff;。)

到目前为止我有:

li, a {
  transition:all 1000ms; -webkit-transition:all 1000ms;
  -moz-transition:all 1000ms; -ms-transition:all 1000ms;
  -o-transition:all 1000ms;
}

nav ul li:hover a:visited, nav ul li:hover,
nav ul li a:hover a:visited, nav ul li a:hover {
  color:#fff; background-color:#ff6600;
}

它工作...有点...“动画”在链接的 li 上太快了；在非链接 li ("second_level") 上它工作正常。

关于如何使每个元素的“动画”流畅的任何提示？我假设属性相互抵消，但找不到它。

Answer 1

由于多重声明，这可能是一个怪癖。

尽量简化你的 CSS:

nav ul li:hover
{color:#fff; background-color:#ff6600;}

工作正常，look here .