html - 将鼠标悬停在第一个 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 的 child

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

Fiddle

要显示隐藏文本，您需要添加以下 CSS

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

Fiddle