CODEWITHSUNDEEP
htmlcss
Nikk
Nikk

Reputation: 7921

CSS selector not working, show div on parent hover

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>

Upvotes: 1

Views: 205

Answers (1)

Akshay
Akshay

Reputation: 14378

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>

Upvotes: 2

Related Questions