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

Question

The CSS selector I am using to show a div on hover of a parent div isn't working. Do I have an error in my CSS?

Thanks.

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

How about this i changed 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>