html - 设置默认 div(CSS 过渡)

Question

我的目标是创建一个包含 3 个绝对定位、重叠的 div 的页面。一次只能看到 1 个 div。页面底部的 3 个按钮用于通过使用 CSS 过渡的淡入/淡出“选择”每个 div。

我很接近，但我有一个小问题。

目前，初始化时页面是空白的，只有 3 个按钮。
我的问题是，如何在初始化时默认显示第一个 div(id="#1")而不需要按按钮。我仍然希望 div #1 遵循正常的淡入/淡出规则，初始化时除外。

HTML:

<div id="1" class="inner">One</div>
<div id="2" class="inner">Two</div>
<div id="3" class="inner">Three</div>

<a href="#1" class="button">Toggle One</a>
<a href="#2" class="button">Toggle Two</a>
<a href="#2" class="button">Toggle Three</a>

一些 CSS:

.inner{
    position:absolute;
    visibility:hidden;
    opacity:0;
    transition:visibility 0s linear .5s, opacity .5s linear;
}
.inner:target{
    visibility:visible;
    opacity:1;
    transition-delay:0s;
}

我更喜欢不使用 javascript/jQuery 的解决方案，但如果有必要我也不反对。

Answer 1

您很可能至少需要使用 JavaScript/jQuery 来设置加载时 #1 div 的可见性。您可以通过以下方式使用 CSS 执行此操作:

.inner:first-of-type {
    visibility: visible;
    opacity: 1;
}

http://jsfiddle.net/74qYY/

限制是需要背景来遮挡其他 div。如果你不能忍受，你可以随时使用 JS:http://jsfiddle.net/74qYY/1/