css 大纲被下一个元素隐藏

up9lanfz 于 12个月前发布在其他

关注(0)|答案(4)|浏览(128)

我有一行图像，每个图像都被 Package 在一个链接中。
我想一个虚线轮廓出现在每个图像周围，当我悬停鼠标。
问题是，除了最后一张图像，RHS上的轮廓都不见了。
这就好像图像是重叠的轮廓图像的左边。
无论如何，使一个轮廓出现在所有4个方面，当我悬停？
（我需要的图像对接到对方没有差距。
我在FF14，Chrome，IE9上试用了这个。
http://jsfiddle.net/spiderplant0/P3WBG/

css

来源：https://stackoverflow.com/questions/11802399/outline-getting-hidden-by-the-next-element

4条答案

按热度按时间

vcudknz31#

最简单的方法是将position: relative分配给a元素，然后增加a > img:hover的z-index（而不是样式化a:hover：

a > img {
    position: relative;
}

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

字符串
JS Fiddle demo的一个。

赞(0）回复(0）举报 12个月前

m4pnthwp2#

只需将position: relative; z-index: 1000添加到其:hover样式中：updated fiddle

**更新：**实际上，你甚至不需要z-index，相对定位本身就可以实现你的目标。

赞(0）回复(0）举报 12个月前

5us2dqdw3#

你可以做的是将每个图像的边框设置为1px solid，不管背景颜色是什么，然后在img:hover上设置你想要的边框。下面是我所说的工作jsFiddle：
http://jsfiddle.net/P3WBG/12/

赞(0）回复(0）举报 12个月前

tvokkenx4#

这是一个简单的代码片段

<!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>

字符串

赞(0）回复(0）举报 12个月前

我来回答

css 大纲被下一个元素隐藏

4条答案

相关问题

热门标签

最新问答