[英]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.