CSS 选择器不起作用，在父悬停时显示 div答案

【问题标题】：CSS selector not working, show div on parent hoverCSS 选择器不起作用，在父悬停时显示 div
【发布时间】：2015-03-30 21:32:06
【问题描述】：

我用来在父 div 悬停时显示 div 的 CSS 选择器不起作用。我的 CSS 是否有错误？

谢谢。

HTML：

    html body div.left-cont {
      position: relative;
      float: right;
      clear: none;
      display: block;
      width: -webkit-calc(100% - 100px);
      width: -o-calc(100% - 100px);
      width: -moz-calc(100% - 100px);
      width: calc(100% - 80px);
      height: 1000px;
      margin: 0 10px 0 0;
      padding: 0;
      z-index: 8;
    }
    html body div.left-cont div.item {
      position: relative;
      float: left;
      clear: none;
      display: block;
      width: 48%;
      height: 200px;
      margin: 10px 1% 0 1%;
      padding: 0;
      -webkit-border-radius: 2.7px;
      -moz-border-radius: 2.7px;
      border-radius: 2.7px;
      overflow: hidden;
      background-color: #e9e9e9;
    }
    html body div.left-cont div.item div.hover {
      position: relative;
      float: right;
      clear: none;
      display: block;
      width: 100px;
      height: 200px;
      margin: 0 0 0 0;
      padding: 0;
      opacity: 0;
      background-color: orange;
    }
    html body div.left-cont div.item:hover ~ div.hover {
      opacity: 1;
    }

<div class="left-cont">

  <div class="item animate">
    <div class="hover animate">
    </div>
  </div>
</div>

【问题讨论】：

重复？ stackoverflow.com/questions/16479642/…
帮自己一个忙——避免这种不必要的选择器嵌套，这会使您的 css 很难维护、扩展并影响性能（尽管可以忽略不计）

标签： html css

【解决方案1】：

这个怎么样我改了html body div.left-cont div.item:hover div.hover

html body div.left-cont {
  position: relative;
  float: right;
  clear: none;
  display: block;
  width: -webkit-calc(100% - 100px);
  width: -o-calc(100% - 100px);
  width: -moz-calc(100% - 100px);
  width: calc(100% - 80px);
  height: 1000px;
  margin: 0 10px 0 0;
  padding: 0;
  z-index: 8;
}
html body div.left-cont div.item {
  position: relative;
  float: left;
  clear: none;
  display: block;
  width: 48%;
  height: 200px;
  margin: 10px 1% 0 1%;
  padding: 0;
  -webkit-border-radius: 2.7px;
  -moz-border-radius: 2.7px;
  border-radius: 2.7px;
  overflow: hidden;
  background-color: #e9e9e9;
}
html body div.left-cont div.item div.hover {
  position: relative;
  float: right;
  clear: none;
  display: block;
  width: 100px;
  height: 200px;
  margin: 0 0 0 0;
  padding: 0;
  opacity: 0;
  background-color: orange;
}
html body div.left-cont div.item:hover  div.hover {
  opacity: 1;
}

<div class="left-cont">

  <div class="item animate">
    <div class="hover animate">
    </div>
  </div>
</div>

【讨论】：

不需要选择器？
@Boris 选择子元素时不需要