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

我正在尝试实现上看到的相同的鼠标悬停图像效果，我假设这是通过一些jquery和css魔术实现的。有没有好的教程来说明这是如何做到的

通过查看jquery文档，我似乎需要像这样使用hover：

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

---

不确定CSS部分应该放在哪里…

您可以这样处理CSS

<style>
.imageBox { float:left; width:100px; height:100px; position:relative; background:#000; overflow:hidden; }
.imageBox .imageActions { position:absolute; top:0; left:0; width:100%; height:40px; background:#999; display:none; }
.imageBox img { width:100%; }
.imageBox:hover .imageActions { display:block; }
</style>

<div class="imageBox">
    <div class="imageActions "></div>
    <img src=".." />
</div>

.imageBox{float:左；宽度：100px；高度：100px；位置：相对；背景：#000；溢出：隐藏；}
.imageBox.imageActions{位置：绝对；顶部：0；左侧：0；宽度：100%；高度：40px；背景：999；显示：无；}
.imageBox img{宽度：100%；}
.imageBox:hover.imageActions{display:block；}

---

您可以这样处理css

<style>
.imageBox { float:left; width:100px; height:100px; position:relative; background:#000; overflow:hidden; }
.imageBox .imageActions { position:absolute; top:0; left:0; width:100%; height:40px; background:#999; display:none; }
.imageBox img { width:100%; }
.imageBox:hover .imageActions { display:block; }
</style>

<div class="imageBox">
    <div class="imageActions "></div>
    <img src=".." />
</div>

.imageBox{float:左；宽度：100px；高度：100px；位置：相对；背景：#000；溢出：隐藏；}
.imageBox.imageActions{位置：绝对；顶部：0；左侧：0；宽度：100%；高度：40px；背景：999；显示：无；}
.imageBox img{宽度：100%；}
.imageBox:hover.imageActions{display:block；}

---

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

HTML--

您还可以使用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的演示：

当然，你也可以使用JS实现淡入淡出：

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

下面是一个使用JS的演示：

更新

也可以通过如下方式设置

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;
}​

---

这里是一个演示：

您可以在图像周围创建一个包装，在该包装中，您可以使用鼠标悬停时显示/消失的按钮。然后在图像悬停时显示/隐藏这些按钮

HTML--

您还可以使用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的演示：

当然，你也可以使用JS实现淡入淡出：

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

下面是一个使用JS的演示：

更新

也可以通过如下方式设置

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;
}​

---

这里有一个演示：

看起来像是土生土长的。现代化和现代化。看看qtip2或者其他更好的东西，因为我看到沉重的iPad支架看起来像是土生土长的。现代化和现代化。看看qtip2或者其他更好的产品，因为我看到了iPad对+1的强大支持。我不知道CSS的“转换”属性。FWIW，CSS唯一的解决方案在IE7中不起作用。此外，JS版本应该可以在IE7中使用，但却抱怨“控制台”未定义。有什么想法吗？@ErikE它在IE7中对我有效，但是你可能需要将

*display:inline

添加到

.image wrapper

CSS规则中，这样它将与IE7糟糕的CSS呈现兼容。非常感谢这个伟大的示例。CSS选项似乎会起作用。@Paul我也喜欢CSS实现，需要记住的是，动画不适用于不支持

transition

属性：，元素会显示，但不会与动画一起显示。啊，我看到IE 9不支持util v10，所以我可以使用您的JS示例。我还有一个问题。要创建如发布的示例中所示的单个按钮，我假设这些按钮只是图像包装器correct？+1的一部分。我不知道CSS的“转换”属性。FWIW，CSS唯一的解决方案在IE7中不起作用。此外，JS版本应该可以在IE7中使用，但却抱怨“控制台”未定义。有什么想法吗？@ErikE它在IE7中对我有效，但是你可能需要将

*display:inline

添加到

.image wrapper

CSS规则中，这样它将与IE7糟糕的CSS呈现兼容。非常感谢这个伟大的示例。CSS选项似乎会起作用。@Paul我也喜欢CSS实现，需要记住的是，动画不适用于不支持

transition

属性：，元素会显示，但不会与动画一起显示。啊，我看到IE 9不支持util v10，所以我可以使用您的JS示例。我还有一个问题。要创建如本文示例中所示的单个按钮，我假设这些按钮只是图像包装的一部分，对吗？