jquery - jQuery on mouseover 在 mouseout revert 上做一些事情

Question

当您单击按钮时，它们会加载页面，但在悬停时，我在 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");
     });
});

我需要帮助来设置鼠标移出

因此，如果我在site.com/about菜单上并将鼠标悬停在 div 中加载的内容然后我希望鼠标悬停恢复到关于页面的内容......等等

感谢您在这方面的任何帮助

Answer 1

这是一个粗略的解决方案（可能需要优化）：

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));
});​