Question

我一直在阅读我的问题的几个帖子，但仍然无法找到我正在做的错误。我试图使用一个灯箱，它也具有其背景的过渡（如果可能的话盒子本身）。 它的作用： OnClick按钮 - ＆gt;背景+灯箱淡入.OnClick X按钮 - ＆gt; Background + Lightbox淡出。 但它不起作用，因为我无法看出问题所在。那么，我做错了什么？

我为任何人创建了一个jsfiddle会话，以便小提琴＆＃34;用。 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>

您可以按照＆＃34;产品＆＃34;。

调用灯箱

Answer 1

首先，元素不能有display：none。如果它不可见，你将无法看到动画，也无法看到对象。

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

最后一件事：“color”属性只会设置元素内部文本的颜色。您必须在元素内添加一些文本，或者将属性编辑为背景颜色，而不是：）

CSS过渡 - 无效

1 个答案: