Question

我希望有一个表格，其中所有边框（内部/外部）都是宽度上的单个像素，我通过在表格上设置border-collapse样式来实现这一点。

然后我希望onmouseover每个TD单元格，将border-color更改为不同的颜色。如果表边框尚未折叠，则此方法可以正常工作。但是如果你折叠边框那么它就无法工作。

但是，如果我没有折叠边框，那么我就无法获得单个像素宽度的边框！

这不可能吗？

编辑：为了澄清，在使用边框折叠和设置TD边框颜色时，只设置了右边框和下边框。

编辑编辑：我最终实现了这个改变鼠标悬停的背景。背景GIF是带边框的白色框。 UUUUGGH！尽管在所有浏览器中都能完美运行......

Answer 1

我意识到这是一个非常古老的帖子，但我认为无论如何我都会做出贡献，以防它有用。

除非您对所有表格单元使用像素精确的宽度和高度，否则不知道如何获得带边框的背景图像？

但另一个选择是在悬停时使用“outline”而不是border。例：

table { border-collapse: collapse; }
table td { border: solid 1px gray; }
table td:hover { border: none; outline: solid 1px red; }

适用于IE6以外的所有浏览器。

根据您使用的颜色，外观可能不太理想，但效果非常好。

Answer 2

有什么方法可以完全放弃使用表并使用div代替？就初始设置而言，这有点痛苦，但最后我认为你可能会发现从长远来看它更容易操作。

Answer 3

是的，我也知道这是一个旧帖子.. 我这样做的方式适用于所有浏览器！只需创建一个元素，让它成为#cellsel。不要忘记将定位设置为绝对或相对，并相应地设置左和右。最高要求和z-index，显示为无（最初不可见）。现在的策略是使用jquery在鼠标悬停时将#cellsel附加到td上，最糟糕的部分是使用mouseenter / mouseleave / mousemove事件和一个标志变量来验证鼠标何时离开特定td ...

  $('***td selector***').mouseenter(
  function(e){
  var $this= $(this);

  if(!ins){//global variable ins -- this is our flag!
    var off= $this.offset();
    var w= $this.width()-1;
    var h= $this.height()-1;
    //#cellsel is the element i created to draw over a td when the mouse hovers a particular td..
    $('#cellsel').css({'top':off.top+'px', 'left':off.left+'px', 'width':w+'px', 'height':h+'px', 'display':'block'});
    ins=true;

    $this.bind('mouseleave',function(){
      $(this).unbind('mouseleave');
      ins=false;
    });
  }//#grid is the table!
  }).parents('#grid').mousemove(
      function(e){
        if(ins){
          var $this= $(this).find('#cellsel');
          var off= $this.offset();
          var w= $this.width();
          var h= $this.height();

          if( (e.pageX < off.left) || (e.pageY < off.top) || (e.pageX > (off.left + w)) || (e.pageY > (off.top + h)) )
            ins=false;                    
        }
    });

如果有人对此提出更正或更好的答案，我会很感激...谢谢！此外，没有必要使用表，你可以使用嵌套的div和css浮动左边完成相同的事情！为确保边框崩溃，请使用以下类似的jquery：

$('***selector to all divs except the ones with the css clear propiety set***').css({'float': 'left', 'width': '100px', 'border': '1px solid #CCC','margin-bottom':'-1px','margin-right':'-1px'});

不可能？ HTML鼠标悬停边框颜色更改边框折叠？

3 个答案: