Login/Register
Outline getting hidden by the next element
Asked Answered
Solved htmlcssoutline
T

4

32

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/

Talavera answered 3/8, 2012 at 19:53 Comment(3)
@Brandon, that's what I thought. And then I clicked on 'run' again, and, suddenly, valid images were there. – Wulf
@Brandon, they are valid images. Or is there a better way to do this? – Talavera
@spiderplant0, no it was my mistake. The images are actually valid, I just needed to run the JSFiddle first. Sorry. – Rodd
W
21

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.

Wulf answered 3/8, 2012 at 20:1 Comment(0)
V
16

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.

Vatican answered 3/8, 2012 at 19:59 Comment(0)
P
0

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/

Python answered 3/8, 2012 at 19:59 Comment(5)
+1, this is probably a better answer than mine, and a nifty little trick. – Rodd
How does that cover the requirement that images need to have zero distance between them? – Vatican
That was never a requirement, the requirement was for them to butt up against each other without gaps. Mine produces no gaps, and works without having to use a position: relative hack, which I was trying to avoid. – Python
Not suitable for me I'm afraid as images have to butt up against each other as they form part of a larger seamless image (I guess I should have been more explicit). Thanks anyway though. – Talavera
It is very explicit: I need the images to butt up to each other without gaps. You're producing background without gaps, not images without spacing between them; if used with non-transparent images which actually have content right up to the edge, they will have very obvious gaps. – Vatican
G
0

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>
Gallman answered 11/11, 2023 at 12:59 Comment(1)
Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Inveracity

© 2022 - 2024 — McMap. All rights reserved.