CSS过渡-无法正常工作

Question

我一直在阅读有关该问题的几篇文章，但仍然找不到我正在执行的错误。 我正在尝试使用一个灯箱，该灯箱还具有其背景的过渡（如果可能的话，还包括灯箱本身的过渡）。 它的作用：OnClick按钮-> Background + Lightbox淡入。OnClickX Button-> Background + Lightbox淡出。 但这是行不通的，因为我看不出问题出在哪里。 那么，我在做什么错呢？

我创建了一个jsfiddle会话供任何人“摆弄”。 的jsfiddle

在HTML中搜索此内容（CSS基本上仅适用于灯箱）：

<div id="light" class="white_content">This is of the Page is still under Development!</div>
<div id="fade" class="black_overlay">
    <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">
        <img style="margin-top: 20px; margin-left: 20px; width: 40px;" alt="X Button" src="res/X.png" />
    </a>
</div>

您可以通过“产品”在灯箱上调用。

Answer 1

首先，该元素不能显示：无。 如果看不到它，您将完全看不到动画或对象。

在JSFiddle中，css没有任何.black_over：hover部分来描述所需的颜色变化。 在样式表中添加.black_overlay：hover {color：red;}之类的内容。

最后一件事：“颜色”属性将仅设置元素内部文本的颜色。 您要么在元素内添加一些文本，要么将属性编辑为类似于background-color的内容：)