我正在尝试实现与在 wookmark 上看到的相同的鼠标悬停在图像上的效果我假设这是通过一些 jquery 和 css 魔法完成的。有什么好的教程可以说明这是如何完成的吗?
查看 jquery 文档似乎我需要像这样使用悬停:
$("li.preview").hover(function(e){
// show and hide come css magic
});
不确定如何处理它的 CSS 部分...
最佳答案
您可以在图像周围创建一个包装器,并在该包装器内放置您希望在悬停时显示/消失的按钮。然后在图像悬停时显示/隐藏这些按钮。
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/
关于javascript - 如何实现悬停在图像上的效果?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11834855/