[英]Hiding and fading in div on hover issue
I'm trying to hide a div on hover and then fadein a seperate div using jquery. 我试图在悬停时隐藏一个div,然后使用jquery淡入一个单独的div。 I have multiple divs with the classes mentioned above, In a grid.
我在网格中具有上述类的多个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>
What I want to achieve is , When hovering over one of them , The hidden div relevant to the div will fadein. 我要实现的是,将鼠标悬停在其中一个上时,与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();
});
How could I achieve this? 我怎样才能做到这一点? Thanks.
谢谢。
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>
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. 您需要这里的
mouseover
事件,因为一旦隐藏div,就不会触发mouseleave
事件,并且代码的第二部分也不会执行。 Use mouseleave
on desc-service
instead. 请在
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.