改变悬停时bg的颜色


change bg color on hover, jquery

我有这段代码工作得很好,但是一旦我刷新页面上的一个div,代码中断,并且.item_control_box不再隐藏,我想我必须重写这段代码以使用。live,但我不确定如何。

$(document).ready(function() {
    $(".item_control_box").hide();
    jQuery('.each_item_container').hover(function() {
        jQuery(this).find('.item_control_box').show()
    }, function() {
        jQuery(this).find('.item_control_box').hide();
    });
});

谢谢!

您是否通过AJAX动态重新加载您的div ?只是好奇。下面是我看到的:

当前js代码将在渲染文档时运行

$(document).ready(function() {
    $(".item_control_box").hide();

^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

这将隐藏所有已经存在的item_control_box类的CURRENT元素

jQuery('.each_item_container').hover(function() {
    jQuery(this).find('.item_control_box').show()
}, function() {
    jQuery(this).find('.item_control_box').hide();
});

^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

用类each_item_container将悬停事件处理程序附加到所有当前元素上,然后在悬停时查找item_control_box的子元素。

});

如果您通过AJAX或其他方式将新数据加载到div中,则需要确保两件事:

1) item_control_box元素不首先显示。你可以通过简单的style="display:none;"

2)确保悬停事件被分配给。each_item_container。这需要通过实时方法jQuery('.each_item_container')来实现。生活("徘徊",函数()……@PeterStuart描述

最后但并非最不重要的是,不确定您使用的是哪个版本的jquery,但在1.7+ live()方法是不赞成的。请使用on()方法。这里是供参考的链接:http://api.jquery.com/live/

您可以更改:

jQuery('.each_item_container').hover(function() {

jQuery('.each_item_container').live('hover', function() {

回答你上面的评论你的HTML应该只是好的,只要你有一个div类称为"each_item_container"。当你将鼠标悬停在它上面时,它现在应该改变你的背景颜色:)

让我知道如果它不工作:)