0

我打算制作一个 JSFiddle，但结果并不正确。

我有一张桌子。当我想将鼠标悬停/鼠标悬停在表格单元格上时，我想更改表格单元格的颜色。我想通过改变背景颜色的不透明度来做到这一点，但这种方法在 IE8 中会产生一些奇怪的行为。我认为这可能是由于我偶尔听到的“hasLayout”问题，但我似乎什至无法设置hasLayout属性（当我测试zoom:1或position:relative我仍然得到 undefined for 时hasLayout）。

我正在使用 PHP 来制作这个表格，并且颜色是动态定义的，所以我想避免:hover为每个不同颜色的单元格创建一个类。如果我可以在鼠标悬停时以相同的方式更改每个单元格（使颜色变亮），而不必为使用的每种颜色实际打印单独的样式，那就太好了。

所以 - 在 IE8 中，我的边框消失了。我尝试在不透明度休息后重置 CSS，但它不起作用。

有谁知道为什么会发生这种情况，我该如何解决它或产生相同结果的替代方法？

这适用于任何浏览器的悬停或鼠标悬停... 悬停在任何浏览器上

IE8 悬停/鼠标悬停后
在 IE8 中悬停后

在 IE8 中的整个表格上悬停/鼠标悬停后 在IE8中到处徘徊后

这是在任何数量的悬停之前和之后表格在 Chrome 中的显示方式。 正则表达式

CSS：

td.colors { 
   border:  1px solid black;  
   height:  4px; 
   padding: 0px; 
} 

td.colors_middle_row {   
   border-top:     0px; 
   border-right:   2px solid #000000;
   border-bottom:  0px;
   border-left:    2px solid #000000;
} 

td.colors_top_row {   
   border-top:     2px solid #000000;
   border-right:   2px solid #000000;
   border-bottom:  0px;
   border-left:    2px solid #000000;
} 

td.colors_bottom_row {  
   border-top:     0px;
   border-right:   2px solid #000000;
   border-bottom:  2px solid #000000; 
   border-left:    2px solid #000000;
}

JS/JQuery：

$('td.colors').on('mouseover hover', function() { 
   $(this).css('opacity','0.3');
   $(this).css('filter','alpha(opacity=30)'); 

});

$('td.colors').on('mouseleave blur', function() { 
   $(this).css('opacity','1');
   $(this).css('filter','alpha(opacity=100)');  

   /*  --- just something I tried that didn't work ---
   if ($(this).hasClass('colors_middle_row')) 
   {
      $(this).css('border-top',    '0px'); 
      $(this).css('border-right',  '2px solid #000000'); 
      $(this).css('border-bottom', '0px'); 
      $(this).css('border-left',   '2px solid #000000');  
   } 

   else if ($(this).hasClass('colors_top_row')) 
   {
      $(this).css('border-top',    '2px solid #000000'); 
      $(this).css('border-right',  '2px solid #000000'); 
      $(this).css('border-bottom', '0px'); 
      $(this).css('border-left',   '2px solid #000000');   
   }

   else if ($(this).hasClass('colors_bottom_row')) 
   {
      $(this).css('border-top',    '0px'); 
      $(this).css('border-right',  '2px solid #000000'); 
      $(this).css('border-bottom', '2px solid #000000'); 
      $(this).css('border-left',   '2px solid #000000');   
   }
   */
});

TD 的 HTML 如下所示：

<td style="width: 12.5%; background-color: rgb(132, 245, 118); opacity: 1;" class="colors colors_middle_row" title="WED @ 8:00">   </td>

我不会发布任何 PHP，因为我认为它根本不相关......但请记住，表格在 PHP 中构建的方式是我不想使用:hover该类的原因，并且更喜欢一种方法将颜色更改为相同程度的悬停/鼠标悬停。我能想到的唯一选择可能是弄乱十六进制颜色代码，并为每个 RGB 或其他东西添加一个特定的数字......我不知道。我需要边界留下来。这里还有一些奇怪的东西——在 IE 中，边框消失后，如果你将鼠标悬停在同一个单元格上，边框会在鼠标悬停时出现，但在鼠标离开后会再次消失。

就像不透明度覆盖了边界，但我不知道如何纠正它。我尝试将其设置为 .99 / 99 而不是 1 / 100 （以及其他一些值），但它仍然没有达到我想要的效果......

这适用于 IE8 和 Chrome。 基本上......我使用下面提供的方法并决定将值存储在对象/数组中。我正在使用 2 个数组（让正常颜色悬停，然后悬停到正常颜色），因为在 IE8 中可靠地按值查找数组索引时遇到了一些问题。我对代码中的颜色变化做了一些假设。 

var colors_array = new Object(); 
var shade_colors_array = new Object(); 

$('td.colors').on('mouseover hover', function() {    
   var color = $(this).css('background-color');   
   if (color.charAt(0) != '#') color = rgb2hex(color);  

   if (typeof  colors_array == 'undefined' || typeof colors_array[color] == 'undefined' ) { 
      var sc = shadeColor(color, 15);    
      shade_colors_array[sc] = color; 
      colors_array[color] = sc;
   } 
   var shade_color = colors_array[color];   

   $(this).css('background-color',  shade_color);  
});

$('td.colors').on('mouseleave blur', function() {  
   var shade_color = $(this).css('background-color');    
   if (shade_color.charAt(0) != '#') shade_color = rgb2hex(shade_color);  

   var color = shade_colors_array[shade_color]; 
   $(this).css('background-color',  color);   
});

function shadeColor(color, percent) {    
   var num = parseInt(color.slice(1),16),  
         amt = Math.round(2.55 * percent),  
         R = (num >> 16) + amt, 
         B = (num >> 8 & 0x00FF) + amt, 
         G = (num & 0x0000FF) + amt; 

   return "#" + (0x1000000 + (R<255?R<1?0:R:255)*0x10000 + (B<255?B<1?0:B:255)*0x100 + (G<255?G<1?0:G:255)).toString(16).slice(1);
}

function rgb2hex(rgb) {   
   rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/); 
   function hex(x) {
      // parseInt(x) was changed to parseInt(x,10) because 
      // i was occasionally getting unexepcted results in IE 
      return ("0" + parseInt(x,10).toString(16)).slice(-2);
   } 
   return '#' + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
}

我已经研究了足够长的时间，以至于“颜色”对我来说不再像是一个词

4

2 回答 2

1

我认为你在这里得到的基本上是 IEfilter样式中的一个错误。

那就没有什么新鲜事了。

您可以尝试通过在内部添加一个额外的标记层来解决它<td>并设置样式。我希望这应该有效。

或者，您可以尝试使用 CSS3Pie 之类的库，它可以让您访问一些在旧 IE 版本中通常不可用的其他 CSS3 功能，例如rgba颜色，这是一种为背景颜色添加透明度的更好方法，而不是opacity和比使用 IE 笨重的样式filter更好。

希望有帮助。

于 2013-07-25T16:20:26.910 回答
0

由于您已经在使用 jQuery 来处理悬停，因此我可能会将颜色更改为计算得较轻的版本，正如您所提到的：

我能想到的唯一选择可能是弄乱十六进制颜色代码并为每个 RGB 或其他东西添加一个特定的数字

使用此处找到的一个简短函数和此处找到的另一个函数，这是一个快速演示：

http://jsfiddle.net/thirtydot/dzRnF/1/

$('td').on('mouseenter', function() {
    $(this).data('originalColor', $(this).css('background-color'));
    $(this).css('background-color', shadeColor2(rgb2hex($(this).css('background-color')), 0.6));
}).on('mouseleave', function() { 
    $(this).css('background-color', $(this).data('originalColor'));
});

function shadeColor2(color, percent) {   
    var f=parseInt(color.slice(1),16),t=percent<0?0:255,p=percent<0?percent*-1:percent,R=f>>16,G=f>>8&0x00FF,B=f&0x0000FF;
    return "#"+(0x1000000+(Math.round((t-R)*p)+R)*0x10000+(Math.round((t-G)*p)+G)*0x100+(Math.round((t-B)*p)+B)).toString(16).slice(1);
}
function rgb2hex(rgb) {
    rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
    function hex(x) {
        return ("0" + parseInt(x).toString(16)).slice(-2);
    }
    return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
}
于 2013-07-25T16:04:47.770 回答