Question

我一直在寻找过去的几天，但却找不到任何有用的东西。我正在尝试获得Lightbox演示页面（http://lokeshdhakar.com/projects/lightbox2/）上使用的相同发光效果。我想做到这一点，当我将鼠标悬停在我的缩略图上时，会发生同样的动画光晕。但我找不到任何真正有用的东西。有谁知道他们是如何实现这一目标的？

Answer 1

这是他们所做的：

.example-image-link {
    display: inline-block;
    padding: 4px;
    margin: 0 0.5rem 1rem 0.5rem;
    background-color: #fff;
    line-height: 0;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -ms-border-radius: 6px;
    -o-border-radius: 6px;
    border-radius: 6px;
    -webkit-transition: background-color 0.5s ease-out;
    -moz-transition: background-color 0.5s ease-out;
    -o-transition: background-color 0.5s ease-out;
    transition: background-color 0.5s ease-out
}

.example-image-link:hover {
    background-color: #4ae;
    -webkit-transition: background-color 0;
    -moz-transition: background-color 0;
    -o-transition: background-color 0;
    transition: background-color 0
}

.example-image {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px
}

重要的位是背景颜色和过渡。

http://jsfiddle.net/DjXn9/

使用Lightbox在悬停时需要图像发光

1 个答案: