Jump to content

How to apply active class for active link


Recommended Posts

Hello,

HTML:

<div class="areas-box-list">
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 area-loc">
<a href="../denver-county" target="_self"><br><span class="glyphicon glyphicon-map-marker text-primary"></span><span class="text-primary">Denver County</span> </a></div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 area-loc">
<a href="../arapahoe-county" target="_self"><br><span class="glyphicon glyphicon-map-marker text-primary"></span><span class="text-primary">Arapahoe County</span> </a></div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 area-loc">
<a href="../douglas-county" target="_self"><br><span class="glyphicon glyphicon-map-marker text-primary"></span><span class="text-primary">Douglas County</span> </a></div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 area-loc">
<a href="../jefferson-county" target="_self"><br><span class="glyphicon glyphicon-map-marker text-primary"></span><span class="text-primary">Jefferson County</span> </a></div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 area-loc">
<a href="../adams-county" target="_self"><br><span class="glyphicon glyphicon-map-marker text-primary"></span><span class="text-primary">Adams County</span> </a></div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 area-loc">
<a href="../broomfield-county" target="_self"><br><span class="glyphicon glyphicon-map-marker text-primary"></span><span class="text-primary">Broomfield County</span> </a></div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 area-loc">
<a href="../boulder-county" target="_self"><br><span class="glyphicon glyphicon-map-marker text-primary"></span><span class="text-primary">Boulder County</span> </a></div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 area-loc">
<a href="../gilpin-county" target="_self"><br><span class="glyphicon glyphicon-map-marker text-primary"></span><span class="text-primary">Gilpin County </span> </a></div>
</div>

 

CSS:

.area-loc a:hover{
  background:#04437a; 
}

.area-loc a:active { color:white; background:#083a9a;;}

 

Hover works just fine. Active does not work. I noticed that I do not have active class in html. I am not sure how to add the active class in html. Please advise!

 

Link to post
Share on other sites

:active has never worked as expected, less so when it was said it was a security risk in that it could be used to track where you have been.

You would have to look at current url in browser address bar, strip it down to last text after the last slash and then match it to the url in href, if identical add class 'active'.

This can be done either by server script such as PHP, or client script javascript/jquery.

Link to post
Share on other sites

I'm not sure what you are referring to. The :active pseudo-class has always worked as designed. It applies a style to an object when the object is being interacted with, either by being clicked or having focus and the user pressing Enter.

You might be thinking of the :visited pseudo-class. Javascript does not have access to computed styles of visited links because that would allow anybody to track where you have been.

Link to post
Share on other sites

No! because visited works! With :active , people expect it to highlight and remain highlighted to current page, not when you just hold the mouse button down for a short time, that is why a class of .active is added, to highlight link/menu to current page.

Link to post
Share on other sites

No, the :active pseudo-class was never intended to do that. It is a mere coincidence that people ended up using the CSS ".active" class to represent a link that points to the current page.

From the original CSS 1 specification: https://www.w3.org/TR/CSS1/#anchor-pseudo-classes

Quote

An 'active' link is one that is currently being selected (e.g. by a mouse button press) by the reader.

 

Link to post
Share on other sites

Yes! I know that! But! That is what anyone new to these pseudo classes, expect it to do, hence

5 hours ago, dsonesuk said:

:active has never worked as expected,

Hence

Quote

people expect it to highlight and remain highlighted to current page

It's not the easiest pseudo class to see or a activate, the chances are that if it exists, it's more than likely never noticed by the majority.

Edited by dsonesuk
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...