鼠标悬停上的jQuery在mouseout revert上做了一些事情

时间:2012-03-26 07:32:44

标签: jquery css wordpress onmouseover onmouseout

当你点击按钮时他们加载页面但是在悬停时我在WordPress模板中有以下jQuery,它将我的内容加载到div中:

jQuery(document).ready(
 function(){
 jQuery("#menu-item-72 a, #menu-item-71 a, #menu-item-70 a,
         #menu-item-69 a, #menu-item-68 a, #menu-item-67 a")
     .mouseover(function () {
       jQuery("#content").load(jQuery(this).attr("href") + " #content");
     });
});

我在设置mouseout时需要帮助

因此,如果我在site.com/about并且鼠标悬停在菜单中,内容会加载到div中,那么我希望mouseout恢复为about页面的内容......依此类推

感谢您提供的任何帮助

1 个答案:

答案 0 :(得分:0)

这是一个粗略的解决方案(可能需要优化):

jQuery(function() {
    (function($) {

        //original html storage
        var origHtml = [];

        //create the child selectors 
        var links = [
            '#menu-item-72 a',
            '#menu-item-71 a',
            '#menu-item-70 a',
            '#menu-item-69 a',
            '#menu-item-68 a',
            '#menu-item-67 a'
            ].join(',');

        //use jQuery to apply one handler for all links
        $('nearest_common_parent_to_links').on('mouseover', links, function() {

            var url = $(this).attr("href") + " #content";

            //remove the original content and store
            origHtml = $("#content").children().detach();

            //load your custom content                
            $("#content").load(url);

        }).on('mouseout', links, function() {

            //restore original html
            $("#content").html(origHtml);

        });
    }(jQuery));
});​