How to fade child div when parent is hovered

Question

I have a div that has class name ordershape and it contains another div fad-res .

I want that when I would hover over a particular ordershape , I want to show the corressponding fad-res whose parent div I hovered, while other divs must be hidden.

<div class="ordershape">
    <div class="fad-res">1</div>
</div>
<div class="ordershape">
    <div class="fad-res">2</div>
</div>
<div class="ordershape">
    <div class="fad-res">3</div>
</div>

Answer 1

Your HTML is invalid since you haven't closed the div with the class ordershape

No reason to use jquery for this, CSS can easily achieve this:

.ordershape:hover .fad-res{
  display:block;
}

Demo CSS

 .fad-res{ display:none; } .ordershape{ height:30px; width:30px; background-color:yellow; } .ordershape:hover .fad-res{ display:block; } 

 <div class="ordershape"> <div class="fad-res">1</div> </div> <div class="ordershape"> <div class="fad-res">2</div> </div> <div class="ordershape"> <div class="fad-res">3</div> </div> 

If you want to do it with jquery do it like this.

$(".ordershape").mouseenter(function() {
  $(this).find(".fad-res").show();
}).mouseleave(function() {
  $(this).find(".fad-res").hide();
});

Demo jQuery

 $(".ordershape").mouseenter(function() { $(this).find(".fad-res").show(); }).mouseleave(function() { $(this).find(".fad-res").hide(); }); 

 .fad-res{ display:none; } .ordershape{ height:30px; width:30px; background-color:yellow; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="ordershape"> <div class="fad-res">1</div> </div> <div class="ordershape"> <div class="fad-res">2</div> </div> <div class="ordershape"> <div class="fad-res">3</div> </div> 

Answer 2

Do not use javascript for that - rely on the CSS transition and opacity properties instead, with :hover selector.

 .fad-res { -webkit-transition: opacity .3s ease-in-out; transition: opacity .3s ease-in-out; opacity: 0; background: #555555; height: 60px; width: 100px; } .ordershape { background: #f6f6f6; height: 100px; width: 100px; float: left; margin-right: 2px; } .ordershape:hover .fad-res { opacity: 1; } 

 <div class="ordershape"> <div class="fad-res">1</div> </div> <div class="ordershape"> <div class="fad-res">2</div> </div> <div class="ordershape"> <div class="fad-res">3</div> </div> 

Answer 3

Well, you can try the jquery version this way

 $(".ordershape").hover(function(){ $(this).find(".fad-res").toggle(); }) 

 .fad-res{ display : none; } .ordershape{ width : 20px; height: 20px } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div class="ordershape"> <div class="fad-res">1</div> </div> <div class="ordershape"> <div class="fad-res">2</div> </div> <div class="ordershape"> <div class="fad-res">3</div> </div>