A：悬停在CSS中不起作用

debugcn 发表于 Dev

迈汉·尼杰（Maihan Nijat）

我正在实现超链接的样式（a和a：hover），但浏览器仅考虑第一个“ a样式”，而完全忽略了“ a：hover）样式，当我删除“ a样式”时，它可以很好地工作。我不知道为什么会发生冲突，因为我正在做网站和书籍上解释的同样的事情。

这是我的HTML代码：

<nav class="vertical">
    <h4>Course Outline</h4>
    <ol>
        <li><a href="#">The Course of War</a>
            <ol>
                <li><a href="#">1861-1862</a></li>
                <li><a href="#">1863</a></li>
                <li><a href="#">1864-1865</a></li>
            </ol>
        </li>
        <li><a href="#">Aftermath</a>
            <ol>
                <li><a href="#">Lincoln Assassination</a></li>
                <li><a href="#">Reconstruction</a></li>
                <li><a href="#">A New Constitution</a></li>
                <li><a href="#">The United States Is ...</a></li>
            </ol>
        </li>
    </ol>
</nav>

这是CSS

 nav.vertical a:hover {
    text-decoration:uderline;
    color: hsla(212%,100%,29%,1);
}

nav.vertical a {
    color: hsla(212%,100%,29%,0.6);
    text-decoration:none;
}

我在这里浏览了有关此问题的所有帖子，但仍然无法解决。

罗科·C·布尔扬（Roko C.Buljan）

hsla(212%,100%,29%,1);

应该

hsla(212,100%,29%,1); /* h = HUE and it's a 0-360 degrees value (not %) */

还

uderline

应该

underline

nav.vertical a:hover {
    text-decoration:underline;
    color: hsla(212,100%,29%,1);
}

nav.vertical a {
    color: hsla(212,100%,29%,0.6);
    text-decoration:none;
}

<nav class="vertical">
    <h4>Course Outline</h4>
    <ol>
        <li><a href="#">The Course of War</a>
            <ol>
                <li><a href="#">1861-1862</a></li>
                <li><a href="#">1863</a></li>
                <li><a href="#">1864-1865</a></li>
            </ol>
        </li>
        <li><a href="#">Aftermath</a>
            <ol>
                <li><a href="#">Lincoln Assassination</a></li>
                <li><a href="#">Reconstruction</a></li>
                <li><a href="#">A New Constitution</a></li>
                <li><a href="#">The United States Is ...</a></li>
            </ol>
        </li>
    </ol>
</nav>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。