Jump to content

Active link should stay colored


Narges

Recommended Posts

I'm confused about the a:active property. In my first website, which has been online 2 years, a:active links should go red. This works as intended: I click on the link, the new page opens, the link in the menu is red. (berguenerstein.ch)

In my new website (ab-text.ch), I want the same to happen. But this time, a:active makes the color flash up only for a moment while clicking it. When I'm on the new page, the :active color doesn't show.

CSS tutorials and help pages give conflicting information on what a:active is supposed to do.

Can anyone help? Thanks!

Link to comment
Share on other sites

See if this test code can illustrate the actions and use of class .active and HTML active

button:active has control only while element has focus as in a mouse click
hold down mouse button to see color change with focus

 

	<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width-device-width,initial-scale=1.0, user-scalable=yes"/>
<title> Active test </title>
<!-- For: http://w3schools.invisionzone.com/topic/60288-active-link-should-stay-colored/ -->
<style>
 button { background: orange; }
 button:hover { background: cyan; }
	 .active { background: lime; }
 .active:hover { background: yellow; }
</style>
	</head>
<body>
<div id="btnLinks">
 <button> Test 1 </button>
 <button> Test 2 </button>
 <button> Test 3 </button>
</div>
	<script>
console.clear();
	function init() {
  const sel = document.querySelectorAll('#btnLinks button');
  for (const [i, el] of sel.entries()) {
    el.addEventListener('click', function() { test(el, i); } );
  }
} init();
	function test(elem, ndx) { elem.classList.toggle('active'); }
</script>
	</body>
</html>

 

Edited by JMRKER
forgot to add button:active { background: pink; }
Link to comment
Share on other sites

Note addition in "Edited" at end.

I was unable to alter posted code to show addition.

<style>  
button { background: orange; } 
button:hover { background: cyan; }  

button:active { background: pink; }

.active { background: lime; }  
.active:hover { background: yellow; }
</style>

Edited by JMRKER
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...