不可能的？ HTML <TD> mouseover 边框颜色随边框折叠而变化？答案

【问题标题】：Impossible? HTML <TD> mouseover border-color change with border-collapse?不可能的？ HTML <TD> mouseover 边框颜色随边框折叠而变化？
【发布时间】：2009-01-08 14:25:37
【问题描述】：

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

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

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

这不可能吗？

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

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

【问题讨论】：

标签： html css

【解决方案1】：

我知道这是一篇很老的帖子，但我想无论如何我都会做出贡献以防万一。

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

但另一种选择是在悬停时使用“轮廓”而不是边框。例如：

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

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

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

【讨论】：

【解决方案2】：

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

【讨论】：

Plan B 是正确的，更不用说 onmouseover 在技术上不是的有效标记，并且可能无法在所有浏览器中正常工作（IE 是第一个支持此功能的）。

【解决方案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'});

【讨论】：