css僞類沒有顯示或懸停

我在div中有一個div，我想要做的就是讓它懸停在父項上，子項發生更改。問題是我無法得到任何東西顯示，我不知道爲什麼。css僞類沒有顯示或懸停

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/

來源

2012-03-22 loriensleafs

你不應該開始元素的ID和類以數字。這可能是爲什麼沒有出現。 – 2012-03-22 15:55:17

我不相信id也可以以數字開頭我已經移除了該3在HTML和CSS和您的div的div div開始顯示。

來源

2012-03-22 15:55:58

-1

而不是id，使用類。即

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

來源

2012-03-22 16:23:06 patrick

ID和類不能與數字或符號開始。只在一些瀏覽器上，但是有什麼意義。要添加（僅供參考），請勿使JavaScript元素（類別& ID）太短（如2個字符），因爲JavaScript會有問題。

來源

2012-03-22 17:27:42 Undefined

這裏沒有人沒有做出另一個修復的片段，所以我做了（從ID屬性的第一個地方刪除了數字）。

另外，正如我所看到的，您使用了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>

來源

2016-08-11 10:44:32 ceruleus

css僞類沒有顯示或懸停

回答

相關問題