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

あなたは$を使用してコンテンツをロードすることができます（ "ターゲット "）file.htmlは、いくつかのマークアップを含むHTML断片である。負荷（" file.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 
    }); 
});