Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Outline getting hidden by the next element

Tags:

I have a row of images, each wrapped in a link.

I want a dotted outline to appear around each image when I hover the mouse.

The trouble is, the outline on the RHS is missing from all but the last image.

Its as if the images are overlapping the outline of the image to its left.

Anyway to make an outline appear on all 4 sides when I hover?

(I need the images to butt up to each other without gaps.)

I tried this out on FF14, chrome, IE9.

http://jsfiddle.net/spiderplant0/P3WBG/

like image 883
spiderplant0 Avatar asked Aug 03 '12 19:08

spiderplant0


1 Answers

The easiest way is to assign position: relative to the a elements, and then increase the z-index of the a > img:hover (instead of styling the a:hover:

a > img {     position: relative; }  a > img:hover {     outline: 3px dotted blue;     z-index: 3000; } 

JS Fiddle demo.

like image 151
David Thomas Avatar answered Sep 19 '22 04:09

David Thomas