Geek asks and answers

The outline is hidden by the following element.

I have a line of images, each of which is wrapped in a link.

I want a dashed outline to appear on every image when I hover over it.

The problem is that the RHS loop is missing in all but the last image.

As if the images overlap the outline of the image on the left.

Anyway, so that the outline appears on all four sides when I hover over?

(I need the images to fit together without spaces.)

I tried this on FF14, chrome, IE9.

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

+5
source share
3 answers

- position: relative a, z-index a > img:hover ( a:hover:

a > img {
    position: relative;
}

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

JS Fiddle demo.

+9

position: relative; z-index: 1000 :hover:

: z-index, .

+4

What you can do is set that each border of the image will be 1px solid regardless of the background color, and then img:hoveryou set the border to the one you want. Here is the working jsFiddle of what I'm talking about:
http://jsfiddle.net/P3WBG/12/

0
source

More articles:


All Articles