jQuery .hover() 在悬停在新元素上后在旧元素上触发
jQuery .hover() fires on old element after hovering on new one
我有一个 div,其中嵌套了两个标签,它们是指向其他页面的链接,并且一个挨着另一个。
我正在将有效的幻灯片应用于第三个 div,它在悬停时放置在标签下方。
我遇到的问题是,如果我将鼠标悬停在其中一个标签上,然后将鼠标移开但没有移动到下一个标签,效果会正常工作。
如果我直接从一个标签移动到另一个标签,则隐藏 div 效果的滑动发生在悬停的第一个标签上,而不是当前标签上。
HTML:
<div class="top">
<label class="head left" id="home">Welcome - <?php echo $_SESSION['description'] . " (" . $_SESSION['lid'] . ")"; ?>
</label>
<label id="logout" class="head right">Logout</label>
jQuery代码:
// Slide in effect for hover on class=head labels
$("#home, #logout").hover(function () {
// Set width to hovering element width:
$(".labelunderscore").css("width", $(this).width() + 20);
// Set position on labelunderscore to current element left value
$(".labelunderscore").css("left", $(this).offset().left);
// Check where are we hovering. Left side slide from left right from right
if ($(this).offset().left > $(window).width()/2) {
// We are on the right side
$('.labelunderscore').show('slide', {direction: 'right'}, 200);
} else {
// Left side
$('.labelunderscore').show('slide', {direction: 'left'}, 200);
}
}).mouseout(function () {
$('.labelunderscore').hide('slide', {direction: 'left'}, 200);
})
只听悬停在标签的父级上,因此它们不会被视为 mousein/out:
的两个单独元素
例如
$(".top").hover(function () {
找到解决方案。问题是在页面中创建的 labelunderscore
div。 "confuses" jquery 库在应用滑动效果时,必须在相同的 div 上应用滑出效果 。 =13=]
问题已通过在运行时在函数中创建 labelunderscore
div 并根据悬停元素的 ID 为其分配唯一 ID 来解决。代码如下:
// Slide in effect for hover on class=head labels
$(".head").hover(function () {
//alert($(this).attr('id'))
$('#main').append('<div id="labelunderscore_' + $(this).attr("id") + '" class="labelunderscore"></div>');
// Set width to hovering element width:
$('#labelunderscore_' + $(this).attr("id")).css("width", $(this).width() + 20);
// Set position on labelunderscore to current element left value
$('#labelunderscore_' + $(this).attr("id")).css("left", $(this).offset().left);
// Check where are we hovering. Left side slide from left right from right
if ($(this).offset().left > $(window).width()/2) {
// We are on the right side
$('#labelunderscore_' + $(this).attr("id")).show('slide', {direction: 'right'}, 200);
} else {
// Left side
$('#labelunderscore_' + $(this).attr("id") ).show('slide', {direction: 'left'}, 200);
}
}, function () {
$('#labelunderscore_' + $(this).attr("id")).hide('slide', {direction: 'left'}, 200);
})
我有一个 div,其中嵌套了两个标签,它们是指向其他页面的链接,并且一个挨着另一个。
我正在将有效的幻灯片应用于第三个 div,它在悬停时放置在标签下方。
我遇到的问题是,如果我将鼠标悬停在其中一个标签上,然后将鼠标移开但没有移动到下一个标签,效果会正常工作。
如果我直接从一个标签移动到另一个标签,则隐藏 div 效果的滑动发生在悬停的第一个标签上,而不是当前标签上。
HTML:
<div class="top">
<label class="head left" id="home">Welcome - <?php echo $_SESSION['description'] . " (" . $_SESSION['lid'] . ")"; ?>
</label>
<label id="logout" class="head right">Logout</label>
jQuery代码:
// Slide in effect for hover on class=head labels
$("#home, #logout").hover(function () {
// Set width to hovering element width:
$(".labelunderscore").css("width", $(this).width() + 20);
// Set position on labelunderscore to current element left value
$(".labelunderscore").css("left", $(this).offset().left);
// Check where are we hovering. Left side slide from left right from right
if ($(this).offset().left > $(window).width()/2) {
// We are on the right side
$('.labelunderscore').show('slide', {direction: 'right'}, 200);
} else {
// Left side
$('.labelunderscore').show('slide', {direction: 'left'}, 200);
}
}).mouseout(function () {
$('.labelunderscore').hide('slide', {direction: 'left'}, 200);
})
只听悬停在标签的父级上,因此它们不会被视为 mousein/out:
的两个单独元素例如
$(".top").hover(function () {
找到解决方案。问题是在页面中创建的 问题已通过在运行时在函数中创建 labelunderscore
div。 "confuses" jquery 库在应用滑动效果时,必须在相同的 div 上应用滑出效果 。 =13=]
labelunderscore
div 并根据悬停元素的 ID 为其分配唯一 ID 来解决。代码如下:// Slide in effect for hover on class=head labels
$(".head").hover(function () {
//alert($(this).attr('id'))
$('#main').append('<div id="labelunderscore_' + $(this).attr("id") + '" class="labelunderscore"></div>');
// Set width to hovering element width:
$('#labelunderscore_' + $(this).attr("id")).css("width", $(this).width() + 20);
// Set position on labelunderscore to current element left value
$('#labelunderscore_' + $(this).attr("id")).css("left", $(this).offset().left);
// Check where are we hovering. Left side slide from left right from right
if ($(this).offset().left > $(window).width()/2) {
// We are on the right side
$('#labelunderscore_' + $(this).attr("id")).show('slide', {direction: 'right'}, 200);
} else {
// Left side
$('#labelunderscore_' + $(this).attr("id") ).show('slide', {direction: 'left'}, 200);
}
}, function () {
$('#labelunderscore_' + $(this).attr("id")).hide('slide', {direction: 'left'}, 200);
})