jquery - jqueryはマウスオーバー時に画像をセルに設定します

Question

テーブルがあり、マウスを置いたセルに画像を表示したいのですが。私は周りを見回しましたが、見つけた例は非常に複雑に見えます。

各セルにすでに画像を入れて、それらを非表示/表示する必要がありますか？

Answer 1

表のセルに背景画像を使用するのは非常に難しいため、背景画像の効果を得るには div を使用する必要があります。次の CSS を指定します。

td.class td {
   width:100%;
   height:100%;
   display:none;
}

そして、このjQueryを使用してください：

$(function(){
   $('td.class').hover(function() {
      $(this).children('img').show();
   },function(){
      $(this).children('img').hide();
   });
});

Answer 2

jQuery を使用した例: http://jsfiddle.net/rEETW/

$(document).ready(function ()
{
        var image;
        $('td').hover(function()
          {
            image = $('<img/>').attr('src', 'http://maps.google.com/images/experiments/nav_logo78.png');
            $(this).append(image);
          }, function ()
          {
            $(image).remove();
          }); 
    });​

cssのみですが、最初に画像をテーブルに配置する必要がありますhttp://jsfiddle.net/rEETW/1/

td img
{
 display:none;   
}

td:hover img
{
 display: block;   
}