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

jquery在mouseover上将图像设置为单元格

2 个答案: