CODEWITHSUNDEEP
javascripthtmlcss
Ahmed Gaber
Ahmed Gaber

Reputation: 119

How to fade child div when parent is hovered

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

Upvotes: 0

Views: 93

Answers (3)

Muhammad Usman
Muhammad Usman

Reputation: 10148

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>

Upvotes: 0

wscourge
wscourge

Reputation: 11291

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>

Upvotes: 0

Carsten L&#248;vbo Andersen
Carsten L&#248;vbo Andersen

Reputation: 27041

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>

Upvotes: 1

Related Questions