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可以从数字开始，我已从HTML中的div ID开头删除了3，而css和div正在显示。

Answer 2

ID和类不能以数字或符号开头。只在某些浏览器上，但重点是什么。添加（供参考）也不要让你的元素（类和ID）太短（如2个字符），因为JavaScript会有问题。

Answer 3

此处没有人制作另一个经过修复的片段，所以我做了（从ID属性的第一位删除了号码）。

另外，正如我所看到的，您使用了webkit供应商前缀 - 您应该考虑为其他供应商添加前缀（我不知道您使用的是哪种浏览器）。我找到了一个很棒的tool在线版，我也为你做了前缀。

没有详细说明，我可以看到你的transform可以将容器移到视图之外，所以也许这会导致一些可见性问题（你可以在代码片段中看到它几乎在视图之外）

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

Answer 4

使用class而不是id。即

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

css伪类没有显示或悬停

4 个答案: