newcoder1010 Posted March 15, 2020 Share Posted March 15, 2020 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 comment Share on other sites More sharing options...
dsonesuk Posted March 15, 2020 Share Posted March 15, 2020 :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 comment Share on other sites More sharing options...
Ingolme Posted March 15, 2020 Share Posted March 15, 2020 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 comment Share on other sites More sharing options...
dsonesuk Posted March 15, 2020 Share Posted March 15, 2020 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 comment Share on other sites More sharing options...
newcoder1010 Posted March 16, 2020 Author Share Posted March 16, 2020 Thanks for your messages. I am not sure how to edit the html so active class will display in the source code depending on what I am on. If the active class is not visible in the source code, I guess my css wont work. Thanks! Link to comment Share on other sites More sharing options...
Ingolme Posted March 16, 2020 Share Posted March 16, 2020 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 comment Share on other sites More sharing options...
dsonesuk Posted March 16, 2020 Share Posted March 16, 2020 (edited) 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 March 16, 2020 by dsonesuk Link to comment Share on other sites More sharing options...
dsonesuk Posted March 16, 2020 Share Posted March 16, 2020 IF the menu is manually added to each page, you just add active class to the element you want to highlight , else you have to use server language or javascript. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now