javascript - 如何实现悬停在图像上的效果？

Question

我正在尝试实现与在 wookmark 上看到的相同的鼠标悬停在图像上的效果我假设这是通过一些 jquery 和 css 魔法完成的。有什么好的教程可以说明这是如何完成的吗？

查看 jquery 文档似乎我需要像这样使用悬停:

$("li.preview").hover(function(e){  
    // show and hide come css magic
});

不确定如何处理它的 CSS 部分...

Answer 1

您可以在图像周围创建一个包装器，并在该包装器内放置您希望在悬停时显示/消失的按钮。然后在图像悬停时显示/隐藏这些按钮。

HTML--

<span class="image-wrapper">
    <span class="image-options"></span>
    <img src="..." />
</span>

CSS--

.image-wrapper {
    position : relative;
    display  : inline-block;
}
.image-wrapper .image-options {
    position : absolute;
    top      : 0;
    right    : 0;
    left     : 0;
    height   : 25px;
    z-index  : 2;
    display  : none;
}
.image-wrapper:hover .image-options {
    display : block;
}

您还可以使用 CSS3 淡入/淡出选项元素:

.image-wrapper {
    position : relative;
    display  : inline-block;
}
.image-wrapper img {
    position : relative;
}
.image-wrapper .image-options {
    position : absolute;
    top      : 0;
    right    : 0;
    left     : 0;
    height   : 25px;
    z-index  : 2;
    background         : grey;
    border             : 1px solid black;
    opacity            : 0;
    filter             : alpha(opacity=0);
    -webkit-transition : opacity 0.25s linear;
    -moz-transition    : opacity 0.25s linear;
    -ms-transition     : opacity 0.25s linear;
    -o-transition      : opacity 0.25s linear;
    transition         : opacity 0.25s linear;
}
.image-wrapper:hover .image-options {
    opacity            : 1;
    filter             : alpha(opacity=100);
}​

这是一个仅使用 CSS 的演示:http://jsfiddle.net/fJsJb/

当然，您可以使用 JS 实现淡入淡出:

$('.image-wrapper').on('mouseenter', function () {
    $(this).children('.image-options').stop().fadeIn(250);
}).on('mouseleave', function () {
    $(this).children('.image-options').stop().fadeOut(250);
});

这是一个使用 JS 的演示:http://jsfiddle.net/fJsJb/1/

更新

您还可以通过为 top 属性设置动画来创建幻灯片动画，如下所示:

.image-wrapper {
    position : relative;
    display  : inline-block;
    overflow : hidden;
}
.image-wrapper img {
    position : relative;
}
.image-wrapper .image-options {
    position : absolute;
    top      : -25px;
    right    : 0;
    left     : 0;
    height   : 25px;
    z-index  : 2;
    background         : grey;
    border             : 1px solid black;
    -webkit-transition : top 0.25s linear;
    -moz-transition    : top 0.25s linear;
    -ms-transition     : top 0.25s linear;
    -o-transition      : top 0.25s linear;
    transition         : top 0.25s linear;
}
.image-wrapper:hover .image-options {
    top : 0;
}​

这是一个演示:http://jsfiddle.net/fJsJb/2/