javascript - 缩略图周围的灯箱 2 边框

Question

嘿，伙计们，我目前正在尝试使用 2 个灯箱，并且一切正常。然而，我正在尝试 2 弄清楚的是我如何获得像http://lokeshdhakar.com/projects/lightbox2/这样的边框，他们在示例中得到了改变颜色的边框。对此的任何帮助都会很棒。

html:

<div class = "image1">
<a href="images/image1.jpg" rel="lightbox[group]"><img src="images/image1t.jpg" /></a>
</div>

Answer 1

在你的锚上设置一个 css3 过渡属性，然后在 :hover 属性上，效果将“动画”。

.image1 a {
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-ms-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}


.image1 a:hover {
background-color: #8ad459;
-webkit-box-shadow: 0 -1px 0 0 rgba(255, 255, 255, 0.2), 0 1px 4px 0 rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 -1px 0 0 rgba(255, 255, 255, 0.2), 0 1px 4px 0 rgba(0, 0, 0, 0.5);
box-shadow: 0 -1px 0 0 rgba(255, 255, 255, 0.2), 0 1px 4px 0 rgba(0, 0, 0, 0.5);
}

Answer 2

试试下面的代码

.image1 a {
background: none repeat scroll 0 0 rgba(255, 255, 255, 0.1);
border-radius: 4px 4px 4px 4px;
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);
display: block;
float: left;
line-height: 1em;
margin-right: 40px;
padding: 7px;
transition: all 0.2s ease-out 0s;
}
.image1 a:hover {
background-color: #8AD459;
}