CODEWITHSUNDEEP
htmlcssoutline
spiderplant0
spiderplant0

Reputation: 3952

Outline getting hidden by the next element

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/

Upvotes: 33

Views: 23417

Answers (4)

Ashan Navarathna
Ashan Navarathna

Reputation: 1

This is a simple code snippet

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            .box{
                border: 3px solid #0A5C36;
                padding: 2px;
                float: left;
                height: 30px;
                width: 100px;
                position: relative;
            }
            #box2{
                outline: 2px dotted red;
                z-index: 2;
            }
            #box1{
                z-index: 1;
            }
            #box3{
                z-index: 1;
            }
        </style>
    </head>
    <body>
        <div id="box1" class="box"></div>
        <div id="box2" class="box"></div>
        <div id="box3" class="box"></div>

    </body>
</html>

Upvotes: 0

David Thomas
David Thomas

Reputation: 253308

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.

Upvotes: 22

lanzz
lanzz

Reputation: 43158

Just add position: relative; z-index: 1000 to their :hover style: updated fiddle

Updated: Actually, you don't even need the z-index, relative positioning by itself accomplishes your goal.

Upvotes: 17

Vap0r
Vap0r

Reputation: 2616

What you could do is set each images border to be 1px solid whatever the background color is, then on img:hover you set the border to what you want. Here is a working jsFiddle of what I'm talking about:
http://jsfiddle.net/P3WBG/12/

Upvotes: 0

Related Questions