Narges Posted October 18, 2019 Share Posted October 18, 2019 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 More sharing options...
JMRKER Posted October 20, 2019 Share Posted October 20, 2019 (edited) 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 October 20, 2019 by JMRKER forgot to add button:active { background: pink; } Link to comment Share on other sites More sharing options...
JMRKER Posted October 20, 2019 Share Posted October 20, 2019 (edited) 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 October 20, 2019 by JMRKER 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