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伪类没有显示或悬停

回答

相关问题