0

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

任何方向，教程，建议将不胜感激！

4

2 回答 2

0

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

这是关键概念：

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

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

于 2013-08-27T04:42:49.093 回答
0

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

-> 看到这个jsfiddle

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

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

jQuery 参考资料：

于 2013-08-27T04:59:43.067 回答