I attempted to create a JSFiddle, but it was not coming together as expected.
My goal is to change the color of table cells when hovered over. I have been trying to adjust the opacity of the background color for this effect, but I encountered some strange behavior in IE8. I speculated that it might be related to the "hasLayout" issue, which I've heard about before, but my attempts to set the hasLayout property were unsuccessful (even with tests using zoom:1 or position:relative resulting in an undefined value for hasLayout).
Since I'm dynamically defining colors using PHP for this table, I prefer not to create a separate :hover class for each cell's color. Ideally, I'd like to apply a uniform lightening effect on all cells during hover without printing individual styles for every color used. However, in IE8, the borders seem to vanish. Despite my efforts to reset the CSS after adjusting the opacity, the issue persists.
If anyone knows why this issue is occurring or can suggest a solution or alternative approach to achieve the same outcome, please share your insights.
This behavior occurs on hover/mouseover across browsers...
After hover/mouseover in IE8
Following repeated hovering over the table in IE8
Here's how the table appears in Chrome both pre and post hovering activity.
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)');
});
And here is the HTML code for the TD element:
<td style="width: 12.5%; background-color: rgb(132, 245, 118); opacity: 1;" class="colors colors_middle_row" title="WED @ 8:00"> </td>
Even though I refrain from including any PHP code since it seems irrelevant, keep in mind that the way the table is constructed using PHP is the reason why I avoid using the :hover class and seek a method to uniformly adjust colors during mouseover. Perhaps one option could involve manipulating the hex color code by incrementing a specific value in each RGB component. I require the borders to remain visible. Another peculiar observation - in IE, after the borders disappear due to opacity changes, hovering over the same cell briefly reveals the borders but they disappear again upon mouseleave.
The opacity appears to cover the borders, and I am uncertain how to address this issue. I experimented with values below 1 / 100 (e.g., .99 / 99), but it did not yield the desired outcome.
This implementation works in IE8 and Chrome. Essentially, I followed the method provided below and decided to store the color data in arrays/objects. Using two arrays (one for normal color to hover transition and another for hover to normal color transition) helped resolve lookup issues in IE8. Although I made assumptions regarding color transitions in the code, the script effectively handles color adjustments during hover events.
// JavaScript Code Here
The prolonged effort has stripped the word "color" of its meaning through repetition.