jquery - 悬停到纯色背景？

Question

我正试图在我的网站上实现这种效果，但对如何实现感到困惑。我的目标是拥有一个图像，当您将鼠标悬停在它上面时，纯色(不透明度为 .8)和图标(和/或文本)显示在顶部。注意:我的图像也设置为响应式，所以我不确定这是否会产生问题。示例>>如果您单击下面的链接，然后单击左侧的计算机，然后滚动到底部，那里有 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% 高度可能很棘手。位置就是一切。