Question

我正试图在我的网站上实现这种效果，并且难以理解如何做到这一点。我的目标是拥有一个图像，当你将鼠标悬停在它上面时，它会显示一个纯色（像是不透明度为.8），并且图标（和/或文字）会显示在顶部。注意：我的图像也设置为响应，所以我不确定这是否会产生问题。示例＆gt;＆gt;如果单击下面的链接，然后单击左侧的计算机，然后滚动到底部，其中有9个圆圈具有与我的目标类似的悬停效果。 http://themeforest.net/item/strand-one-page-parallax-bootstrap-template/full_screen_preview/5445825

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

Answer 1

我不会真的使用javascript来执行此操作。这是解决方案的一个简单例子。 http://codepen.io/anon/pen/zujBc

这是关键概念：

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

在某些IE版本中，将颜色叠加容器设置为100％高度可能会非常棘手。立场就是一切。

Answer 2

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

- ＆GT;见jsfiddle

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

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

jQuery参考：

悬停在坚实的背景？

2 个答案: