css伪类不显示或悬停答案

【问题标题】：css pseudo class not showing or hoveringcss伪类不显示或悬停
【发布时间】：2012-04-07 05:19:48
【问题描述】：

我在 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/

【问题讨论】：

您不应该以数字开头元素 id 和类。这可能就是什么都没有出现的原因。

标签： css class hover pseudo-class

【解决方案1】：

我不相信 id 可以以数字开头我已经从 HTML 和 css 中的 div id 的开头删除了3，并且您的 div 正在显示。

【讨论】：

【解决方案2】：

ID 和类不能以数字或符号开头。仅在某些浏览器上，但有什么意义。添加（供参考）也不要使您的元素（类和 ID）太短（如 2 个字符），因为 JavaScript 会出现问题。

【讨论】：

【解决方案3】：

这里没有人不做另一个，修复了sn-p，所以我做了（从ID属性的第一个位置删除了数字）。

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

没有详细说明，我可以看到您的transform 可以将容器移到视野之外，所以这也可能导致一些可见性问题（您可以在代码 sn-p 中看到它几乎不在视野之外） .

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

【讨论】：

【解决方案4】：

使用类代替 id。即

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

【讨论】：