悬停到纯色背景？答案

【问题标题】：Hover to solid background?悬停到纯色背景？
【发布时间】：2013-08-27 02:33:18
【问题描述】：

我正在尝试在我的网站上实现这种效果，但不知道如何做到这一点。我的目标是有一个图像，当你将鼠标悬停在它上面时，它会在顶部显示一个纯色（不透明度为 0.8）和一个图标（和/或文本）。注意：我的图像也设置为响应式，所以我不确定这是否会造成问题。示例>>如果您单击下面的链接，然后单击左侧的计算机，然后滚动到底部有 9 个具有悬停效果的圆圈，这与我的目标相似。 http://themeforest.net/item/strand-one-page-parallax-bootstrap-template/full_screen_preview/5445825

非常感谢任何方向、教程、建议！

【问题讨论】：

听起来像是 jQuery.hover 的工作。你有没有尝试过？
是的，我还是个新手，所以我不确定什么是最好的。我玩过 .mouseenter 和 .fadeIn，但我对如何构建 html 以及我需要在其中放入什么感到有点困惑。
@Kobaine 您是否尝试过我的答案中提到的任何小提琴？我会把代码放在我的答案中，但这会是一个很长的答案。看看吧。

标签： jquery html css image mouseenter

【解决方案1】：

我不会真正使用 javascript 来做到这一点。这是解决方案的简单示例。 http://codepen.io/anon/pen/zujBc

这是关键概念：

.container:hover .overlay-color {
    opacity:.5;
}

在某些 IE 版本中，将颜色覆盖容器设置为 100% 高度可能会很棘手。位置就是一切。

【讨论】：

【解决方案2】：

对于这种效果，您有多种选择，这可能取决于您的具体用例。您可以采用优雅降级的纯 CSS，使用 CSS3 属性 transition 为元素的 opacity 设置动画。只会在支持浏览器、现代浏览器如IE9+和chrome、FF等中动画化。

-> 看到这个jsfiddle

否则，您将不得不使用 jQuery 等 JavaScript 库。将.fadeToggle() 或.fadeIn() 和.fadeOut() 与.hover() 或.mouseenter() 和.mouseleave() 结合使用。这应该可以跨浏览器工作，只要我认为您选择的 jQuery 库低于 v2，其中旧的 IE 浏览器支持被丢弃。（没有测试过这个）。 JS 解决方案还可以让您轻松更改使用 .slideToggle 或 .show(500) 的动画，或使用 $(element).animate({'opacity': 1, 'height' : 100%'}, slow); 的其他更多样化的动画，反之亦然。

因此，使用相同标记的 JS 解决方案类似于 this fiddle。

jQuery 参考：

【讨论】：