Applying CSS in JavaScript

Question

I need help in applying CSS to my Javascript. As I am not good at this, I just want to ask all of you who know. Anyway, I use JS in my hover of menu. Below 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, it looks like this:

<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 works for all the tabs, but I wanted the tabs 1 and 4 when hovered, just covers the content behind. It should not move the contents going down, but that's what happens right now actually. I was advised to use position:relative and z-index: -1 because when using overflow, it may not work in IE6. So please help, thanks!

Answer 1

You can use this to add a class

$(this).addClass("myClass");

If you really want to use the .css syntax you need one call per style change like this:

  $(this).css('position','fixed');
  $(this).css('z-index','1');

Here is a jsfiddle of your code with a guess of what css you want to change. jsfiddle.net/G4BgT Please provide more information about what you want to happen.