css擬似クラスが表示されない、またはホバリングしない

Question

divにdivがあります。私がしようとしているのは、親にマウスを置くと変化します。問題は私が何かを見せることができない、なぜ私は確信していない。

CSS：

#3d_stack { 
    border: 1px solid red; 
    -webkit-transform: translate(-49px, 55px); 
    -webkit-perspective-origin: 50% 50%; 
    -webkit-perspective: 50; 
    display: block; 
    -webkit-border-radius: 5px; 
    float: left; 
    position: relative; 
    height: 48px; 
    width: 48px; 
} 

#3d_stack > div:first-child { 
    -webkit-transform: translate3d(1px, 14px, 0px); 
    border: 1px solid red; 
    position: absolute; 
    z-index: 12; 
    height: 34px; 
    width: 46px; 
    background-color: #ffffff; 
    opacity: .3; 
} 

#3d_stack:hover > div:first-child { 
    -webkit-transform: translate3d(1px, 14px, 0px); 
    border: 1px solid red; 
    position: absolute; 
    z-index: 12; 
    height: 34px; 
    width: 46px; 
    background-color: #ffffff; 
    opacity: .9; 
} 

HTML

<div id="3d_stack"> 
    <div></div> 
</div> 

私はここにhttp://jsfiddle.net/4p8CM/223/

Answer 1

を設定バイオリンを持っている私は、IDのは、私はから3を削除した数字で始めることができると信じていませんHTMLとCSSのdiv idの開始とあなたのdivが表示されています。

Answer 2

idの代わりに、classを使用します。すなわち

<div class="box1"></div> 
// css 
div.box1{ 
} 

Answer 3

IDとクラスは数字や記号で始めることはできません。一部のブラウザでのみ表示されますが、何がポイントです。 （参考のために）追加するには、あなたの要素（クラス&のID）をJavaScriptのように短すぎるように（2文字のように）問題にしないでください。

Answer 4

ここで誰も別の修正されたスニペットを作っていないので、（IDプロパティの第1位から番号を削除した）

webkitベンダープレフィックスを使用しています。別のベンダーにプレフィックスを付けることも考慮する必要があります（使用するブラウザーがわかりません）。私はあなたのために接頭辞を付けた偉大なtoolをオンラインで見つけました。

具体的には言わずに、transformがコンテナをビューの外に移動できることがわかります。そのため、可視性の問題も発生する可能性があります（コードスニペットではほとんど見えません）。

#d_stack { 
 
    border: 1px solid red; 
 
    -webkit-transform: translate(-49px, 55px); 
 
      transform: translate(-49px, 55px); 
 
    -webkit-perspective-origin: 50% 50%; 
 
      perspective-origin: 50% 50%; 
 
    -webkit-perspective: 50; 
 
      perspective: 50; 
 
    display: block; 
 
    border-radius: 5px; 
 
    float: left; 
 
    position: relative; 
 
    height: 48px; 
 
    width: 48px; 
 
} 
 

 
#d_stack > div:first-child { 
 
    -webkit-transform: translate3d(1px, 14px, 0px); 
 
      transform: translate3d(1px, 14px, 0px); 
 
    border: 1px solid red; 
 
    position: absolute; 
 
    z-index: 12; 
 
    height: 34px; 
 
    width: 46px; 
 
    background-color: #ffffff; 
 
    opacity: .3; 
 
} 
 

 
#d_stack:hover > div:first-child { 
 
    -webkit-transform: translate3d(1px, 14px, 0px); 
 
      transform: translate3d(1px, 14px, 0px); 
 
    border: 1px solid red; 
 
    position: absolute; 
 
    z-index: 12; 
 
    height: 34px; 
 
    width: 46px; 
 
    background-color: #ffffff; 
 
    opacity: .9; 
 
}

<div id="d_stack"> 
 
    <div></div> 
 
</div>