Question

请原谅这是一个相当基本的问题。我已经在谷歌和其他地方搜寻过，并且找不到适用于我的解决方案。

我正在使用以下标记生成图片库。

<div class="gallery">
  <a class="galleryimg">
    <img>
  </a>
  ....
</div>

根据图库中的图像数量重复.galleryimg。它也是左边浮动的。

我想创建一个概述所选图像的:hover效果。我尝试过使用边框（弄乱布局），轮廓（原理上听起来很完美），以及插入框阴影（在图像下方渲染）。

大纲非常接近我想要实现的目标。但右侧和底部轮廓被漂浮在其上方的相邻图像遮挡。

所以我的问题是：如何在链接图像库中创建悬停边框/轮廓效果？

我真的很感激别人如何解决这个问题。谢谢！

修改

图像相邻，两者之间没有空白区域。

Answer 1

你可以像这样使用简单的css技巧

<强> CSS

#example-one a img, #example-one a           { border: none; overflow: hidden; float: left; }
#example-one a:hover                         { border: 3px solid black; }
#example-one a img{width:100px;height:50px;}
#example-one a:hover img                     { margin: -3px;}

现场演示http://jsfiddle.net/rohitazad/QkT7d/3/

点击此处http://css-tricks.com/examples/InnerBorderImages/#

了解更多信息

Answer 2

检查出来：

http://jsfiddle.net/hMNZE/

可能是理想的效果。您将体验到图像的轻微更改，因为它会使自身变小以允许边框。但请告诉我。这只是一个快速修复。

--- --- EDIT

http://jsfiddle.net/hMNZE/2/

是使用负边距的第二个版本，这看起来没问题，但图像重叠了一点。

查看链接：http://css-tricks.com/examples/InnerBorderImages/

--- --- EDIT2

http://jsfiddle.net/hMNZE/3/是最好的

--- --- EDIT3

.gallery {
    width:100%;
    height:100%;
    padding:10px;
}

.galleryimg {
    float:left
}

.galleryimg img {
    z-index:-10;
}

.galleryimg img:hover {
    margin:-2px;
    border:2px solid blue;
    z-index:9999;
}

Answer 3

如果您使用box-sizing属性（自IE8起支持），您可以在:hover上添加边框而不会弄乱布局

.galleryimg {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width : 100px;
    float : left;
}

.galleryimg:hover {
    border  : 3px gray solid;
}

有关此媒体资源的详情，请参阅http://paulirish.com/2012/box-sizing-border-box-ftw/

Answer 4

http://jsfiddle.net/Vvr7C/ 诀窍是在.gallery上添加填充，这样你就可以在画廊边缘的图像上看到轮廓：

.gallery {padding:2px}
.galleryimg:hover img {outline: red solid 2px}

Answer 5

如果您使用 box-shadow ＆amp;它低于另一个图像，然后像这样写：

.gallery img:hover{
 padding:0;
 box-shaow:0 0 0 2px red;
 z-index:1;
}
.gallery img{position:relative;}

Answer 6

如果上面的问题得到解答，那很好。如果没有，听起来你可能需要在图像和周围的其他物体之间留出一些余量。你说它被遮盖了。它可能只需要2px左右的保证金就可以让它不受影响。

Answer 7

嗨，你可以通过 CSS3 * box-shadow *属性轻松完成这件事： -

box-shadow: inset 0px 0px 0px 3px rgba(000,000,000,0.9);

请参阅演示以便更好地理解： - http://jsbin.com/upedel/5/edit

更新的蚂蚁

请参阅更新的演示： - http://jsbin.com/upedel/10/edit

如何在库中的浮动图像上创建悬停边框/轮廓？

7 个答案: