css - 为什么我的链接无法使用 Css 转换和 Z-index？

Question

希望有人能指出我的正确...

我整天都在尝试弄清楚如何在一些 html 元素后面隐藏 flash，然后在悬停时使用 css transitions 显示 flash 对象。

我想出了两个解决方案，每个都只是我真正想要的 %50。

第一个示例在您悬停时进行转换，您可以单击链接，但我希望它像示例二一样进行转换。

第二个例子按我想要的方式转换，但后面的任何东西都不能点击。

我哪里搞砸了？我的 z-index(s) 在示例二中没有得到解析吗？

示例:http://jsfiddle.net/zyD4D/

HTML:

    <object> <a href="#" title="Links Work">Links Work</a>

        <br /><a href="#" title="But Curtains">But Curtains</a>&nbsp;&nbsp;<a href="#" title="Are Wrong">Are Wrong</a>

    </object>
</div>
<hr>
<div id="theatre2"> <em id="curtain-left2"></em>
    <em id="curtain-right2"></em>

    <object> <a href="#" title="Links Don't Work">Links Don't Work</a>

        <br /><a href="#" title="But Curtains">But Curtains</a>&nbsp;&nbsp;<a href="#" title="Are Right">Are Right</a>

    </object>
</div>

CSS:

div#theatre {
    border: inset black 0px;
    height: 425px;
    width: 600px;
    margin: 0 auto;
    text-align: center;
    line-height: 120px;
    font-size: 30px;
    position: relative;
    overflow: hidden;
    background: black;
}
div#theatre #curtain-left {
    content:'';
    position: absolute;
    z-index: 2;
    top: 0px;
    bottom: 0px;
    width: 50%;
    background: url(http://s27.postimg.org/dznawniab/curtain_left.jpg) 0px 0px no-repeat;
    transition: all 4s ease;
    background-size: 100%;
}
div#theatre #curtain-right {
    content:'';
    position: absolute;
    z-index: 2;
    top: 0px;
    bottom: 0px;
    width: 50%;
    background: url(http://s27.postimg.org/9ozg9kyfn/curtain_right.jpg) 0px 0px no-repeat;
    transition: all 4s ease;
    background-size: 100%;
}
#curtain-left {
    left: 0;
}
#curtain-right {
    right: 0;
}
div#theatre:hover #curtain-right {
    width: 0;
    background-size: 1px;
    transition: all 4s ease;
}
div#theatre:hover #curtain-left {
    width: 0;
    background-size: 1px;
    transition: all 4s ease;
}
div#theatre2 {
    border: inset black 0px;
    height: 425px;
    width: 600px;
    margin: 0 auto;
    text-align: center;
    line-height: 120px;
    font-size: 30px;
    position: relative;
    overflow: hidden;
    background: black;
}
div#theatre2 #curtain-left2 {
    content:'';
    position: absolute;
    z-index: 2;
    top: 0px;
    bottom: 0px;
    width: 50%;
    transition-property:background-position;
    transition-duration:2s;
    transition-timing-function:ease-out;
    background: url(http://s27.postimg.org/dznawniab/curtain_left.jpg) 0px 0px no-repeat;
    background-size: 100%;
}
div#theatre2 #curtain-right2 {
    content:'';
    position: absolute;
    z-index: 2;
    top: 0px;
    bottom: 0px;
    width: 50%;
    transition-property:background-position;
    transition-duration:2s;
    transition-timing-function:ease-out;
    background: url(http://s27.postimg.org/9ozg9kyfn/curtain_right.jpg) 0px 0px no-repeat;
    background-size: 100%;
}
#curtain-left2 {
    left: 0;
}
#curtain-right2 {
    right: 0;
}
div#theatre2:hover #curtain-right2 {
    transition-property:background-position;
    transition-duration:2s;
    transition-timing-function:ease-out;
    background-position: +301px 0px, left top;
}
div#theatre2:hover #curtain-left2 {
    transition-property:background-position;
    transition-duration:2s;
    transition-timing-function:ease-out;
    background-position: -301px 0px;
}
.object {
    margin: 0.0em auto;
    position: relative;
    z-index: 1;
}

Answer 1

将您的 CSS 更改为仅分别过渡左右窗帘的左右边距。

div#theatre #curtain-left {
    ...
    transition: margin-left 4s ease;
    margin-left:0;
    left:0;
    ...
}
div#theatre #curtain-right {
    ...
    transition: margin-right 4s ease;
    margin-right:0;
    right:0;
    ...
}
div#theatre:hover #curtain-right {
    margin-right:-300px;
}
div#theatre:hover #curtain-left {
    margin-left:-300px;
}

并删除悬停时背景大小的变化。

我修好了你的 fiddle 。 http://jsfiddle.net/zyD4D/2/