Question

我想在用户悬停div时加载外部文件（使用jQuery）。我尝试在悬停时加载它像css文件，但没有运气。（另外，我可以在悬停时加载一个css文件，对吧？我试过的代码如下所示。）

$(document).ready(function () {
    $("#f1_container2").hover(function () {
        $('head').append('<link rel="stylesheet" href="theme/supersized.shutter.css" type="text/css" media="screen" />');
    });
});

Answer 1

您可以使用$（“。target”）。load（“file.html”）加载内容，其中file.html是包含一些标记的HTML片段。

由于CSS是被动的（除非有人使用它，否则它什么都不做），它首先可以放在头脑中。这样，当你将鼠标悬停在div上时，你可以执行$（“。target”）。addClass（“newClass”）来应用一些常规样式。

hover（）也可以使用SECOND函数，该函数在鼠标离开目标时调用，因此您可以撤消在鼠标悬停时执行的任何操作。

Answer 2

在附加样式表的代码时，文档已经加载并呈现。浏览器已经检索了所需的资源，并且因为您添加了一些代码而无法检索文件。

如上所述，我建议您预先加载图片或使用其他技术在悬停时检索文件。

我相信这样的事可能有用。

$(document).ready(function () {
    $("#f1_container2").hover(function () {

         // The easy way
         //$('head').append('<img src="images/sprite.gif">');

         // The cool way
         var $img = $('<img>', {
             src:    'images/sprite.gif',
             load:   function() {
                 $(this).fadeIn('slow');
             },
             css: {
                 display:  'none'
             }    
         }).appendTo('body'); // append to where needed
    });
});

使用jQuery在悬停时加载文件

2 个答案: