css - Impossible? HTML <TD> mouseover border-color change with border-collapse? - Stack Overflow

admin2023-02-27  331

I have wish to have a table where all borders (internal/external) are a single pixel in width, I achieve this by setting the border-collapse style on the table.

Then I wish to onmouseover each TD cell, changing the border-color to a different color. This works fine if the table border has not been collapsed. But if you collapse the border then it fails to work.

However if I don't collapse the border then I can't get a single pixel width border!

So is this impossible?

EDIT: To clarify, when using border-collapse, and setting TD border color, only the right and bottom border are set.

EDIT EDIT: I ended up implementing this changing the background on mouseover. The background GIF is a white box with a border. UUUUGGH! Works perfectly in all browsers though ...

Answers:

I have wish to have a table where all borders (internal/external) are a single pixel in width, I achieve this by setting the border-collapse style on the table.

Then I wish to onmouseover each TD cell, changing the border-color to a different color. This works fine if the table border has not been collapsed. But if you collapse the border then it fails to work.

However if I don't collapse the border then I can't get a single pixel width border!

So is this impossible?

EDIT: To clarify, when using border-collapse, and setting TD border color, only the right and bottom border are set.

EDIT EDIT: I ended up implementing this changing the background on mouseover. The background GIF is a white box with a border. UUUUGGH! Works perfectly in all browsers though ...

Answers:

I realize this is a really old post, but thought I'd contribute anyway in case it is helpful.

Don't know how you got a background image w/border to work unless you're using pixel-precise widths and heights for all table cells?

But another option is to use "outline" instead of border on hover. Ex.:

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

Works in all browsers except IE6.

Depending on the color you use, the appearance might not be ideal but it works pretty well.

Answers:

Is there any way you can forego the use of a table altogether and use divs instead? It's a little more painful as far as the initial set-up goes, but in the end I think you might find that it's easier to manipulate in the long-run.

Answers:

yep i know too it's an old post.. i did this in a way that works on all browsers! Just creat an element, let it be #cellsel. Dont forget to set the positioning to absolute or relative and set accordingly the left & top propieties and the z-index, display to none (to be invisible at first). Now the strategy is to use jquery to attach #cellsel over the td when the mouse hovers..., the worst part is to play with the events of mouseenter/mouseleave/mousemove and a flag variable to verify when the mouse left a particular 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;                    
        }
    });

I'd appreciate if someone else brings a correction to this or a better answer... thanks! Also, it is not necessary to use tables u can accomplish the same thing using nested divs and the css float left! To ensure the border collapse apply some jquery like this:

$('***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'});

转载请注明原文地址:https://www.u19.cn/read-201116.html
New Post(0)