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

试试这个：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

此处需要mouseover个事件，因为一旦隐藏div，mouseleave事件就不会被触发，代码的第二部分也不会执行。请改用mouseleave上的desc-service。

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

在悬停问题上隐藏和淡入div

2 个答案: