jquery - TD の IE8 で背景の不透明度を変更すると、境界線が削除されます...?

Question

JSFiddle を作成するつもりでしたが、うまくいきませんでした。

私はテーブルを持っています。表のセルをホバー/マウスオーバーしたいときに、表のセルの色を変更したい。背景色の不透明度を変更してこれを行いたいのですが、この方法ではIE8で奇妙な動作が発生します。時々耳にする「hasLayout」の問題が原因ではないかと思いましたが、hasLayoutプロパティを設定することすらできないようです（でテストした場合、zoom:1またはposition:relativeまだ未定義になっている場合hasLayout）。

:hoverこのテーブルを作成するために PHP を使用しています。色は動的に定義されるため、セルの色ごとにクラスを作成することは避けたいと思います。使用する各色の個々のスタイルを実際に印刷することなく、マウスオーバーで同じ方法で各セルを変更する (色を明るくする) ことができればいいと思います。

だから - 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方法が、クラスを使用したくない理由であり、ホバー/マウスオーバーの色を同じ程度に変更します。私が考えることができる唯一の代替手段は、おそらく16進数のカラーコードを台無しにして、各RGBまたは何かに特定の番号を追加することです...わかりません。私は滞在するために国境が必要です。これは奇妙なことです-IEでは、境界線が消えた後、同じセルにマウスオーバーすると、マウスオーバーの境界線が表示されますが、マウスが離れると再び消えます。

不透明度が境界を覆っているようですが、修正方法がわかりません。1 / 100 (および他のいくつかの値) の代わりに .99 / 99 に設定しようとしましたが、それでも私が望んでいたことはできませんでした...

これは IE8 と Chrome で動作します。 基本的に...以下に示す方法を使用し、値をオブジェクト/配列に格納することにしました。IE8で配列インデックスを値で確実に検索する際に問題があったため、2つの配列を使用しています（通常の色をホバーしてから通常の色にホバーするため）。コード内で色が変化するという仮定をいくつか立てました。

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

私はこれに十分長い間取り組んできたので、「色」はもはや言葉のようには見えません

score 0 · Accepted Answer

あなたはホバリングを処理するためにすでにjQueryを使用しているので、あなたが言及したように、おそらく色を計算された明るいバージョンに変更するでしょう:

私が考えることができる唯一の代替手段は、おそらく16進数のカラーコードを台無しにして、各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]);
}

jquery - TD の IE8 で背景の不透明度を変更すると、境界線が削除されます...?

2 に答える 2

Related

Reference