javascript - 在鼠标悬停时添加叠加

Question

我是一名网络开发新手。我目前正在编写一个简单的 wordpress landing page当用户将鼠标悬停在所述图像上时，我想添加一些功能来变暗和添加文本。它确实应该非常简单。

对于 an example它实际上实现了相同的 wordpress 主题并且做对了。

在上面页面的“关于我们”部分，他们提供的图片具有与我悬停所需的功能完全相同的功能，但我不知道他们是如何做到这一点的。

如果您需要更多说明，请随时询问，我不确定我的词典是否正确/清晰。

Answer 1

DEMO

仅显示不透明的白色 background 元素和当鼠标悬停在 wrapper 上时的内容元素。请注意，您需要将内容与背景元素分开，这样背景的不透明度就不会影响内容。

<div class="wrap">
    <div class="content">This is the content</div>
    <div class="bkg"></div>
</div>

.wrap {
    background-image:url('http://www.online-image-editor.com/styles/2013/images/example_image.png');
    width:475px;
    height:365px;
    position:relative;
}
.wrap:hover .bkg {
    display:block;
}

.wrap:hover .content {
    display:block;
}

.bkg {
    background:#fff;
    opacity:0.5;
    position:absolute;
    width:100%;
    height:100%;
    display:none;
    z-index:1;
    filter: alpha(opacity=50);
}

.content {
    width:100%;
    height:100%;
    display:none;
    z-index:3;
    position:absolute;
}