jQuery 带有悬停功能的 if-else 条件？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4107046/
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
if-else condition with hover function?
提问by laukok
Can I set if-else condition with hover function? I want to load a page next to the text link when I hover it and I want to be able to hover/ mouseover on the loaded content. But this loaded content will be removed under two situations:
我可以使用悬停功能设置 if-else 条件吗？当我悬停文本链接时，我想在文本链接旁边加载一个页面，并且我希望能够将鼠标悬停在加载的内容上。但是这个加载的内容会在两种情况下被移除：
but I have the problem with the situation number 2 - if I apply the hover function on number-2, the number 1 just won't happen. The loaded content is removed immediately when my mouse leave the text link box.
但是我遇到了第 2 种情况的问题 - 如果我在第 2 号上应用悬停功能，则第 1 号就不会发生。当我的鼠标离开文本链接框时，加载的内容会立即被删除。
So, I am thinking to put else-if condition to the hover function if possible (or any other better ideas if you have any?) I want to remove the loaded content only if the situation number does not occur. If I have moused over on the loaded content, then don't apply situation number 2, until my mouse leave the loaded content area.
所以，我想如果可能的话将 else-if 条件放在悬停函数中（或者如果你有任何其他更好的想法？）我只想在情况编号不发生时删除加载的内容。如果我将鼠标悬停在加载的内容上，则不要应用第 2 种情况，直到我的鼠标离开加载的内容区域。
Below is the jQuery (for the situation number 1):
下面是 jQuery（对于第 1 种情况）：
$(document).ready(function() {
$(".button").hover(function(e){
$('.wrapper-item-content').remove();
var parent = $(this).parent();
$(this).parent().addClass('current');
var parent_top = parent.offset().top-180;
var parent_left = parent.offset().left+80;
$("body").append('<div class="wrapper-item-content"></div>');
$(".wrapper-item-content").css({
top: parent_top,
left: parent_left,
position: 'absolute',
zIndex: '100',
width: '350px',
height: '100%',
overflow: 'visible',
border: '1px solid #000'
});
var path_url = $(this).attr('href');
var path_file = $(this).attr('rel');
var item_wrapper = $('.wrapper-item-content');
var array_url = path_url.split('/');
var pg_url = $(array_url).last()[0];
item_wrapper.load(path_file+'?url='+pg_url, function(){
item_wrapper.hover(function() {
item_wrapper.addClass('mouseenter');
},function(){
item_wrapper.removeClass('mouseenter');
parent.removeClass('current');
item_wrapper.remove();
});
parent.hover(function() {
//something
},function(){
if(item_wrapper.hasClass('mouseenter'))
{
//alert('has mouseenter');
}
else
{
//alert('has no mouseenter');
//parent.removeClass('current');
//item_wrapper.remove();
}
});
});
},
function(){
});
});
The html:
html：
<div class="box"><a href="#" class="button" rel="content.php">Hover me</a></div>
回答by hunter
the hover()event can take another function which is called when the mouse leaves.
该hover()事件可以采用另一个在鼠标离开时调用的函数。
$(".button").hover(
function(e){ }, // over
function(e){ } // out
);
hover(handlerIn(eventObject), handlerOut(eventObject))
悬停（handlerIn（eventObject），handlerOut（eventObject））
