Hiding and fading in div on hover issue

Question

I'm trying to hide a div on hover and then fadein a seperate div using jquery. I have multiple divs with the classes mentioned above, In a grid.

<div class="intro-service">Welcome, User1</div>
<div class="desc-service" style="display:none;">Hidden Div 1(Should show on hover)</div>

<div class="intro-service">Welcome, User2</div>
<div class="desc-service" style="display:none;">Hidden Div 2(Should show on hover)</div>

<div class="intro-service">Welcome, User3</div>
<div class="desc-service" style="display:none;">Hidden Div 3(Should show on hover)</div>

What I want to achieve is , When hovering over one of them , The hidden div relevant to the div will fadein.

$('.intro-service').hover(function() {
  $(this).find('.intro-service').hide();
  $(this).find('.desc-service').fadeIn();
}, function() {
  $(this).find('.desc-service').hide();
  $(this).find('.intro-service').fadeIn();
});

How could I achieve this? Thanks.

Answer 1

Try this:

 $('.intro-service').hover(function() { $(this).hide(); // This will hide the div that is being hovered $(this).next('.desc-service').fadeIn(); // This will first get the next div with class desc-service and apply fadein effect over it }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="intro-service">Welcome, User1</div> <div class="desc-service" style="display:none;">Hidden Div 1(Should show on hover)</div> <div class="intro-service">Welcome, User2</div> <div class="desc-service" style="display:none;">Hidden Div 2(Should show on hover)</div> <div class="intro-service">Welcome, User3</div> <div class="desc-service" style="display:none;">Hidden Div 3(Should show on hover)</div> 

Answer 2

You need mouseover event here because once you hide the div, mouseleave event wont be fired and the second part of your code wont execute. Use mouseleave on desc-service instead.

 $('.intro-service').mouseover(function() { $(this).hide(); $(this).next('.desc-service').fadeIn(); }); $('.desc-service').mouseleave(function(){ $(this).hide(); $(this).prev('.intro-service').fadeIn(); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <div class="intro-service">Welcome, User1</div> <div class="desc-service" style="display:none;">Hidden Div 1(Should show on hover)</div> <div class="intro-service">Welcome, User2</div> <div class="desc-service" style="display:none;">Hidden Div 2(Should show on hover)</div> <div class="intro-service">Welcome, User3</div> <div class="desc-service" style="display:none;">Hidden Div 3(Should show on hover)</div>