簡體   English   中英

在div上對懸停問題進行隱藏和褪色

[英]Hiding and fading in div on hover issue

我試圖在懸停時隱藏一個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();
});

我怎樣才能做到這一點? 謝謝。

嘗試這個:

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

您需要這里的mouseover事件,因為一旦隱藏div,就不會觸發mouseleave事件,並且代碼的第二部分也不會執行。 請在desc-service上使用mouseleave

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

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM