Search code examples
jqueryhtmlcssselected

Jquery scrolldown css not working

Ok, so after fixing the dissapear problem (Element disappearing on click) I have a new problem that, I think, is related to this problem.

When I click on a header link the page scrolls down, with Jquery, to the right article. This function works great. But an other function changes css of the according button on position on the page (scrolltop()). This function also works. But when I clicked the button my css does not change. It makes my button a white link with a gray "clicked" border arround it (done by the browser). Only when I click anywhere else on the screen (to remove the "active" button state) the button changes color.

I could not replicate the problem with JSFiddle (Fiddle) so here are some images describing the problem above:

This is my menu:

Normal

This is when I hover my menu:

hover

This is when I selected "over ons":

Selected

And this is when I unselect the button:

Unselected

Now the question is, how can I give my selected button (image 3) the same css as my unselected button (image 4)?

This style text-decoration:none does not work. Also using the :active css attribute does not work.

I cannot seem to find a solution on the internet. Am I missing something?

Solution

Thanks Drops for this answer! :focus did the trick. Never heard of it before, but it worked. Thanks!

Solution

  • You should take a look at CSS pseudo-class :focus, here are docs.

    This answer will tell you more about difference between :focus and :active pseudo-classes.

    Cheers.