1

我在一个简单的画廊中收集了图像，我想在鼠标悬停时从小到大平滑地转换。我目前正在通过在鼠标悬停时显示图像的实际大小但在没有时将其强制为特定大小并使用 display:none 隐藏实际大小来做到这一点。

我想包含一些 webkit 转换，以便在 1 秒内完成此操作以改进转换。我知道 webkit 是在两个状态之间转换一个元素但是无论如何我可以做到这一点。

我也想避免使用 JavaScript。

.reveal a .preview
{
    display: none;
}

.reveal a:hover .preview
{
    display: block;
    position: absolute;
    z-index: 1;
}

.reveal img
{
    background: #fff
    padding: 2px;
    vertical-align: top;
    width: 100px;
    height: 75px;
}

.reveal li
{
    background: #eee;
    display: inline;
    float: left;
    margin: 3px;
    padding: 5px;
    position: relative;
}

.reveal .preview
{
    border-color: #000;
    width: auto;
    height: auto;
}
4

1 回答 1

1

如果没有 html（即 jsfiddle），我很难在您的代码中插入解决方案。但这是一个通用解决方案http://jsfiddle.net/9QVae/2/

img
{
    width:100px;
    height:100px;
    background:red;
    transition:width 1s, height 1s;
    -moz-transition:width 1s, height 1s, -moz-transform 1s; /* Firefox 4 */
    -webkit-transition:width 1s, height 1s, -webkit-transform 1s; /* Safari and Chrome */
    -o-transition:width 1s, height 1s, -o-transform 1s; /* Opera */
}

悬停时：

img:hover
{
    width:200px;
    height:200px;
}

所以诀窍是指定要添加效果的css属性（即宽度），然后指定事件的持续时间，即然后在选择器transition:width 1s;下指定最终尺寸:hover

注意： transition不适用于IE

于 2013-02-24T14:03:45.153 回答