CODEWITHSUNDEEP
htmlcss
DarkBlueMullet
DarkBlueMullet

Reputation: 93

How to make border appear on image when tabbing?

I am building a my first site. A big part of the specifications is that it should be very user friendly.

I have a a few images at the top of my home page that have hyperlinks attached. They have a grey border that is changed to pink when hovering over the image.

The problem I have is that I can tab my was to the images and hitting return results in the link being opened so that is fine but I the border does not change colour when I have tabbed to it, so it is difficult if not impossible to know what image you are currently tabbed to.

Border code:

<style>
IMG.HoverBorder {border:1px solid #eee;}
    IMG.HoverBorder:hover {border:1px solid #FC359A;}
</style>

Upvotes: 1

Views: 218

Answers (1)

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201588

The :focus pseudo-class matches elements that have focus, but an img element normally does not have (and need not have) focus. But an a element that constitutes a link is focusable, so you need to use a selector that matches an img element that a child of a focused element. Example (using a 3px thick border just for clarity):

IMG.HoverBorder { border: 3px solid #eee; }
IMG.HoverBorder:hover { border: 3px solid #FC359A; }
a:focus IMG.HoverBorder {border-color: green;}
img { vertical-align: bottom; } /* to make border sit tight around */
<input placeholder="Click here and press TAB">
<a href="foo"><img class=HoverBorder src="http://lorempixel.com/100/50" alt=dummy1></a>
<a href="bar"><img class=HoverBorder src="http://lorempixel.com/100/100" alt=dummy2></a>

Upvotes: 1

Related Questions