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/
答
我不相信id也可以以数字开头我已经移除了该3
在HTML和CSS和您的div
的div div开始显示。
答
而不是id,使用类。即
<div class="box1"></div>
// css
div.box1{
}
答
ID和类不能与数字或符号开始。只在一些浏览器上,但是有什么意义。要添加(仅供参考),请勿使JavaScript元素(类别& ID)太短(如2个字符),因为JavaScript会有问题。
答
这里没有人没有做出另一个修复的片段,所以我做了(从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>
你不应该开始元素的ID和类以数字。这可能是为什么没有出现。 – 2012-03-22 15:55:17