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