Question

CSS伪类a：hover，a：visited，和：active不工作

HTML：

<p> 
    <ul>
        <li>
            <a href="ChrisHorse.jpg" class="Horse"> My Photoshop Assignment #1       </a>
        </li>
        <li>
            <a href="puppies.html"> My puppies page </a>
        </li>
        <li>
            <a href="fish.html"> My Fish Page </a>
        </li>
    </ul>
</p>

CSS：

a:hover {color:green;}
a:visited {color:red;}
a:active {color:black;}

Answer 1

CSS中的正确顺序应为：

a:link    { color: red }    /* unvisited links */
a:visited { color: blue }   /* visited links   */
a:hover   { color: yellow } /* user hovers     */
a:active  { color: lime }   /* active links    */

Answer 2

我已经从jsfiddle测试了您的代码。它工作正常。也许你忘了将你的css文件包含在你的html文件中。

所以，只需从以下说明中包含它：

<link rel="stylesheet" type="text/css" href="mystyle.css">

Answer 3

假设您的问题是:hover，问题是您将<{1}}选择器放在 :hover选择器之前，这意味着一旦您的链接被访问，它将不再具有悬停样式（因为它将被访问样式否决）。只需更改选择器的顺序：

:visited

有了这个，当你的链接被访问时，它将是红色的;当你的链接悬停在它上面时，它将是绿色的，无论它是否被访问过;当你的链接被激活时，它将是黑色的。

<强> JSFiddle demo

伪类：访问过，：悬停，：活动不工作

3 个答案: