javascript - 使用 jQuery 在悬停时加载文件

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() 还可以采用第二个函数，当鼠标离开目标时调用该函数，因此您可以撤消鼠标悬停时所做的任何操作。