Question

a:hover { 
    color: #237ca8 !important; 
    font-weight: bold;
}
a:active {
    color: #cccccc !important; 
    font-weight: bold;
}

上面是我的CSS，HTMl是

<div class="services">
    <h2>Request a Quote</h2>
    <ul class="contact">                
        <li>
            <a href="forms/request-quote2.php">
                Warehousing & Inventory Management
            </a>
        </li>
        <li>
            <a href="forms/request-quote3.php">
                Last Mile Transportation
            </a>
        </li>
    </ul>
</div>

悬停链接工作正常，但我尝试了很多次，但是这段代码根本无法正常工作。

我希望如果我点击第三个链接，那么第三个链接将是不同颜色，然后哪个不活动意味着当前链接的不同颜色打开。

Answer 1

您有相同的悬停和活动样式。所以除非你按照Quentin评论中提到的方式进行操作，否则无法区分活动是否正常工作。如果您更改悬停或活动的颜色或任何样式，您将看到它正常工作。演示：http://jsfiddle.net/lotusgodkk/GCu2D/87/

a:hover{ color:#237ca8  !important; font-weight:bold;}
a:active{color:red !important; font-weight:bold;}

Answer 2

要检查特定鼠标事件（：hover，：active，：focus），请使用＆＃34;开发人员工具＆＃34;在chrome：See :hover state in Chrome Developer Tools中，您可以查看规则是否适用

Answer 3

我检查了您已粘贴的代码，它确实在JSFiddle中有效。

!important标记可能会在CSS文件的后期覆盖它。

JSFiddle demo

a：当a：hover运行良好时，active不工作

3 个答案: