移动第一个div并显示文本（第二个div），同时将鼠标悬停在第一个div上

Question

我的问题是在将鼠标悬停在它上方时必须向上移动的div。 检查this JSfiddle for reference。

我想要实现的目标如下：

正如你所看到的，正确的div是悬停的。在jsfiddle我拿了1个div，我试图实现悬停效果，但我只是不明白。

我试过了：

.service-bg:hover + .service-content-bg {
    background-position:0 -250px;
}

但没有任何反应。

任何人都可以帮助我吗？ 我对这种css级别没有太多经验。

Answer 1

您不需要+因为.service-content-bg是.service-bg的孩子

.service-bg:hover .service-content-bg {
    background-position:0 -250px;
}

Fiddle

然后显示添加以下CSS所需的隐藏文本

.service-bg:hover .service-hidden {
    display: block;
}

Fiddle