1

如果这是一个相当基本的问题，请原谅。我在谷歌和其他地方搜索过，还没有找到适合我的解决方案。

我正在生成一个带有以下标记的图片库。

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

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

我想创建一个:hover勾勒所选图像的效果。我尝试过使用边框（弄乱布局）、轮廓（原则上听起来很完美）和插入框阴影（呈现在图像下方）。

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

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

我真的很感激其他人如何解决这个问题的任何想法。谢谢！！

编辑

图像相邻，中间没有空白。

4

7 回答 7

2

嗨，您可以像这样使用简单的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/#

于 2012-04-16T09:04:33.603 回答
1

看一下这个：

http://jsfiddle.net/hMNZE/

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

- -编辑 - -

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

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

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

---编辑2---

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

---编辑3---

.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;
}​
于 2012-04-16T09:17:50.477 回答
0

嗨，您可以通过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

于 2012-04-16T10:18:18.763 回答
0

如果您使用的是box-shadow并且它位于另一张图片下方，则如下所示：

.gallery img:hover{
 padding:0;
 box-shaow:0 0 0 2px red;
 z-index:1;
}
.gallery img{position:relative;}
于 2012-04-16T09:18:24.237 回答
0

如果您使用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/

于 2012-04-16T09:04:23.470 回答
0

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

.gallery {padding:2px}
.galleryimg:hover img {outline: red solid 2px}​
于 2012-04-16T09:04:41.670 回答
0

如果上面回答了您的问题，那就太好了。如果没有，听起来您可能需要在图像和周围的其他对象之间留出一些边距。你说它是模糊的。它可能只需要 2px 左右的边距就可以让它变得模糊。

于 2012-04-16T09:27:53.710 回答