爲什麼我的鏈接不能使用Css轉換和Z-index？

Question

希望有人能指出我的權利...

我一直想整天想弄清楚如何隱藏一些html元素後面的flash，然後在使用css轉換懸停時顯示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; 
} 

並刪除懸停時的背景大小更改。

我修好了你的小提琴。 http://jsfiddle.net/zyD4D/2/