Tab browsing style

I made a page at http://form.kr/dest/tap.php

The page has two links.

if I open the page the two links are in green.
When my mouse is on one of the links, the color of the link is changing to red.
When I press down my mouse, the color of the link is changing to blue,

when my tap is one of the links by tap browsing with the tap key of my keyboard,
text-decoration: overline underline do works
so far so good.

However, text-color is not changing to blue when I do tap-browsing.

I like to change the color of the anchor text during tap-browsing.
I like to find easily on where is my tap during tap browsing.

@joon1, can you please describe what exactly is tap-browsing?

1 Like

there might be “tap key” on your keyboard.
just over the key “Capslock”. and the left of “Q”.
The cursor will go to next link of the wep page per touching the tap key.
.

That’ll be the Tab key.

2 Likes

Yes, that’s it.

tap browsing means , I mean, click the link with tag key.
if you do tap browsing you don’t need to click your mouse.

I do like, personally, tap browsing much because I have some sick “a kind of inflammation” in my wrist.

I like to do tap browsing when I visit web pages which I made.

I think most people would use the phrase “keyboard navigation” for that. (I also find it easier than using a mouse.)

You need to add a:focus to any a:hover styles to ensure they work for keyboard.

e.g.

a:hover, a:focus {color: red;}

4 Likes

Thank you for the phrase “keyboard navigation”.

Thanks to your code I made it successfully at http://form.kr/dest/tap1.php.

I made another variation to add submit button at http://form.kr/dest/tap2.php.
Although two links are changed to red when the key board naviagation is on the link, the submit button is not changed to red.when the key board navigation is on the submit button at http://form.kr/dest/tap2.php.

Can I make the submit button in red when the navigation is on the button with your help?

@joon1,

This link may be of interest:

https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_global_tabindex

There are no styles given for the <button> element on hover or focus in your example. You need to add the rules for the button in the same way as for the <a> element.

button:focus, button:hover {color: red;}