尝试使用css将一个div淡出，另一个div在下面答案

【问题标题】：Trying to use css to fade one div out and another div underneath in尝试使用css将一个div淡出，另一个div在下面
【发布时间】：2013-12-31 09:05:50
【问题描述】：

我已经搜索和搜索...我有两个 div。一个在另一个之上。我想让一个 div 在你滚动它时淡出，另一个 div 淡入，然后在你滚掉它时淡出到第一个 div。问题是，我似乎无法在我的 html 中使用 img src="" 可能是因为它是一个 wordpress 网站。

使用我当前的代码，似乎第一个 div fdaes 出来，第二个 div 淡入，但随后第二个 div 又淡出。我希望它一直存在，直到你滚掉它为止。

任何帮助将不胜感激！我正在努力学习这一点，这非常令人困惑。

这是我的html：

<div id="webdesignlink">
    <div id="webdesignlinka">
        <a style="display:block" href="http://www.sitename.com">
            <div id="webdesignlinkb"></div>
        </a>
   </div>
</div>

这是我的 CSS：

#webdesignlink {
    height: 216px;
    width: 505px;
}

#webdesignlinka {
    height: 216px;
    width: 505px;
    background-image: url(images/webdesignlink.png);
    background-repeat: no-repeat;
    opacity: 1;
}

#webdesignlinka:hover {
    opacity: .0;
    transition: all 1s ease-in-out;
}

#webdesignlinkb {
    height: 216px;
    width: 505px;
    background-image: url(images/designlinkB.png);
    background-repeat: no-repeat;
    opacity: 0;
}

#webdesignlinkb:hover {
    position: absolute;
    opacity: 1;
    transition: all 1s ease-in-out;
}

谢谢！

【问题讨论】：

标签： css html opacity fade

【解决方案1】：

我思...

#webdesignlinka {
  opacity: .0;
  transition: all 1s ease-out;
}

#webdesignlinka:hover {
  opacity: .0;
  transition: all 1s ease-in;
}

【讨论】：

【解决方案2】：

如何将div 放置在彼此之上并且只在:hover 上淡出最上面的那一个？背景中的那个可以一直可见。示例：

HTML

<div class="red"></div>
<div class="blue"></div>

CSS

div {
    height: 100px;
    width: 100px;
    position: absolute;
}

.red {
    background-color: red;
}

.blue {
    background-color: blue;
    transition: opacity 0.5s linear;
}

.blue:hover {
    opacity: 0;
}

LIVE

【讨论】：