Can someone assist me with applying CSS to my Javascript code? I'm not very skilled in this area, so I'd appreciate insight from those who are knowledgeable. My JS is used for the menu hover effect, and here is the code:
$(function(){
$('a img').hover(function(){
$(this).attr('src', $(this).attr('src').replace('_off', '_on'));
}, function(){
if (!$(this).hasClass('currentPage')) {
$(this).attr('src', $(this).attr('src').replace('_on', '_off'));
}
});
});
In my HTML file, it appears as follows:
<tr>
<td valign="top"><a href="#"><img src="img/tabs_01_off.png" width="229" alt="tabs_01"/></a></td>
<td valign="top"><a href="#"><img src="img/tabs_02_off.png" width="229" alt="tabs_02"/></a></td>
<td valign="top"><a href="#"><img src="img/tabs_03_off.png" width="229" alt="tabs_03"/></a></td>
<td valign="top"><a href="#"><img src="img/tabs_04_off.png" width="229" alt="tabs_04"/></a></td>
</tr>
The hover effect works well on all tabs, but what I want is for tabs 1 and 4 to simply cover the content behind them when hovered over. Right now, they shift the contents downwards instead. I was suggested to use position:relative and z-index: -1 to address this issue, as using overflow might not be effective in IE6. Any help would be greatly appreciated. Thank you!