CSS选择器不工作，在父hover上显示div

Question

我用来显示父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>

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