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

Above is my css and HTMl is

<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>

Hover link is working fine but I tried so many times in different ways but this code is not working at all.

I want that if i click on third link then third link will be in different color other then which are not active means different color for current link is open.

  • I'm sure they are working, but you probably have rules of higher precedence overriding them. Check the classes on the element using a web inspector such as Firebug or Dev tools. – Rory McCrossan May 08 '14 at 06:28
  • How would you know whether it's working or not when you have given them the same color? Also, in case you didn't know, `active` happens while you're _clicking_ the link. Have a look [here](http://jsfiddle.net/3WFpr/) – AyB May 08 '14 at 06:29
  • Hover is different from active :) – daR May 08 '14 at 06:30
  • 1
    Maybe you're confusing an active link (which is when you press and hold on a link) and a link showing you what page you're on. – Vince C May 08 '14 at 06:32
  • Just try to change and differ their color for you to see the difference of active and hover – daR May 08 '14 at 06:33
  • i edited my qn kindly check if somebody can help –  May 08 '14 at 07:21
  • 2
    @Monika From your edit, it sounds like you're confusing `:active` pseudo classes (when a user clicks) and indicating to users which page they're on (via a class) - or the active page. If that's correct, and I understand correctly, what you want to do requires either JavaScript (to determine which links correspond to the URL) or server side logic (assuming a page refresh...) – Jack May 08 '14 at 07:31
  • @jack u right i m talking about active page. So i want to ask u that is it possible that i want with :active pseudo class –  May 08 '14 at 08:33
  • 1
    @Monika, unfortunately not with :active. You'll need to use either JavaScript or a server side language to set a class on your link. – Jack May 08 '14 at 16:44
  • alright @jack i did it finally with the help of jquery thanks :) –  May 09 '14 at 04:27
  • 1
    @Monika That's great! :) – Jack May 09 '14 at 06:38

3 Answers3

1

You have same style for hover and active. So you cannot distinguish whether the active is working or not unless you do it the way mentioned in the comment by Quentin. If you change the color or any style for hover or active, you'll see that it's working fine. Demo: http://jsfiddle.net/lotusgodkk/GCu2D/87/

a:hover{ color:#237ca8  !important; font-weight:bold;}
a:active{color:red !important; font-weight:bold;}
K K
  • 17,794
  • 4
  • 30
  • 39
  • 1
    It is possible to distinguish between them, since you can activate a link without hovering it by focusing it and pressing Enter, but the OP probably isn't doing that so this is probably the reason it doesn't appear to be working for them. – Quentin May 08 '14 at 06:47
  • @Quentin Thanks for the correction. I didn't thought about it. – K K May 08 '14 at 06:51
  • @KamleshKushwaha doesn't work for me, I focussed it with Tab and press enter. – Daan May 08 '14 at 07:25
  • I think that's the default behaviour of browsers. You can see this example: http://www.w3schools.com/CSS/tryit.asp?filename=trycss_link – K K May 08 '14 at 07:35
-1

To check specific mouse event (:hover, :active, :focus), use "developer tool" in chrome: See :hover state in Chrome Developer Tools, so you can see if the rules applied or not

Community
  • 1
  • 1
vincicat
  • 1,811
  • 1
  • 13
  • 13
-1

I checked the code you've pasted and it actually does work in JSFiddle.

It might be overwritten in a later stage at your CSS file by the !important tag.

JSFiddle demo

Daan
  • 2,680
  • 20
  • 39