css - 仅通过 CSS 更改悬停内容

Question

我已经看到许多不同的方法来解决以下问题，但它并没有像我希望的那样工作...

我需要制作一个包含多个 div 的 div(主 div)(item-divs)。

每个 item-div 必须显示不同的图片，但是当我将鼠标悬停在某张图片上时，应该隐藏该图片并显示文本 - 在同一个 div 中。

我到底该怎么做？

Answer 1

例如这个变体:

<div class="wrap">
    <div class="child1"></div>
    <div class="child2"></div>
</div>

你的 CSS 应该是:

.wrap:hover > child2{
    opacity: 0;
}

但是静态样式应该是这样的:

.wrap{
    width: 200px;
    height: 300px; /* maybe auto if you want */
    position: relative;
}

.child1{
    width: 100%;
    height: 100%;
    background: lightgreen;
}

.child2{
    width: 100%;
    height: 100%;
    background: #ff3030; /* surely for example */
    position: absolute;
    top: 0;
    left: 0;
}

/* and this block .child2 will be faced. When it's opacity will be 0, you get your effect */