javascript - 在悬停问题上隐藏和淡化 div

Question

我试图在悬停时隐藏一个 div，然后使用 jquery 淡入一个单独的 div。我有多个带有上述类的 div，在网格中。

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

我要实现的是，当悬停在其中一个上时，与该div相关的隐藏div会淡入。

$('.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();
});

我怎样才能做到这一点？谢谢。

Answer 1

试试这个:

$('.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>