javascript Jquery悬停和退出
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28164079/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jquery on hover and out
提问by marukobotto
I am trying to hide a div whenever I will hover over it and show another one in the same place.. And when I take the mouse out of that.. the previous divwill be shown and this divwill be hidden...
每当我将鼠标悬停在一个 div 上并在同一个地方显示另一个 div 时，我都试图隐藏它..当我把鼠标移开时..div将显示前一个，而这个div将被隐藏......
$(document).ready(function(){
$('#hover_tutor').hover(
function () {
$('#hover_tutor').hide();
$('#hover_tutor_hidden').show();
},
function () {
$('#hover_tutor').show();
$('#hover_tutor_hidden').hide();
}
);
});
<div id="hover_tutor">Blah</div>
<div id="hover_tutor_hidden" style="display:none;">Bleh</div>
But on hovering the hover_tutor... something is happening.. It's jumping up and down.. I don't know what's wrong...
但是在悬停时hover_tutor......发生了一些事情......它上下跳跃......我不知道怎么了......
回答by Milind Anantwar
You need to use .mouseenterevent for #hover_tutordiv and .mouseleavefor #hover_tutor_hiddendiv:
您需要使用.mouseenter事件#hover_tutor的div和.mouseleave对#hover_tutor_hiddenDIV：
$('#hover_tutor').mouseenter(function () {
$(this).hide();
$('#hover_tutor_hidden').show();
});
$('#hover_tutor_hidden').mouseleave(function () {
$('#hover_tutor').show();
$(this).hide();
}
).mouseleave();//trigger mouseleave to hide second div in beginning
回答by Shailendr singh
You can also use toggle method instent of hide/show on hover event
您还可以在悬停事件上使用隐藏/显示的切换方法
<div id="hover_tutor" style="display: block;">Blah</div>
<div id="hover_tutor_hidden" style="display: none;">Bleh</div>
$('#hover_tutor').hover(
function () {
$('#hover_tutor').toggle();
$('#hover_tutor_hidden').toggle();
});
Working demo http://jsfiddle.net/ivyansh9897/8jgjvkqk/
回答by Md. Ashaduzzaman
If you do have the flexibility to modify your html little bit using class attribute there's a better way. Use .toggle()to alter the state of your element on both mouseoverand mouseleave.
如果您确实可以灵活地使用 class 属性稍微修改 html，则有更好的方法。使用.toggle()在mouseover和mouseleave上更改元素的状态。
HTML :
HTML :
<div id="hover_tutor" class="hello">Blah</div>
<div id="hover_tutor_hidden" class="hello" style="display:none;">Bleh</div>
jQuery :
jQuery ：
$(".hello").on("mouseover mouseleave", function(){
$("#hover_tutor").toggle();
$("#hover_tutor_hidden").toggle();
});
回答by soundhiraraj
try this,
试试这个，
$('#hover_tutor').hover(function () {
$(this).hide();
$('#hover_tutor_hidden').show();
});
$('#hover_tutor_hidden').hover(function () {
$('#hover_tutor').show();
$(this).hide();
}
));
