Question

我正在为超链接（a和a：hover）实现样式，但浏览器仅考虑第一个＆＃34; a样式）并完全忽略＆＃34; a：hover）样式，并且它在我运行时工作正常删除＆＃34;样式＆＃34;。我不知道为什么会有冲突，因为我在网站和书籍上做了同样的事情。

这是我的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;
}

我在这里查看了有关此问题的所有帖子，但仍然无法修复。

Answer 1

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>

a：悬停不在css中工作

1 个答案: