Thank you very much for your help Eric - and for replying so quickly. All I had left to do was to give the default menu item the class of "clicked" and it works just how I want it. Thanks again.
On Oct 11, 8:24 pm, Eric <[EMAIL PROTECTED]> wrote: > Great question, jez_p! > > You've described a common problem. You'll be happy to know that > there's a solution, _and_ that it will help you out in a number of > other ways as you move forward. The solution involves separating the > 'clicked' and 'hovered' states, and then specifying that the link is > red on either 'clicked' or 'hovered'. We're going to move this code > over to use CSS classes, and we'll use a couple of the following > jQuery functions ( seehttp://docs.jquery.com/Attributes): > - addClass() > - removeClass() > > $('li a').hover (function() { > $(this).addClass('hover'); > }, > function(){ > $(this).removeClass('hover'); > } > ); > > $('li a').click (function() { > $('li a.clicked').removeClass('clicked'); > $(this).addClass('clicked'); > }); > > and in your CSS file: > > /* normal nav link */ > li a { color: black } > > /* highlighted nav link */ > li a.hover, li a.clicked { color: red } > > One nice thing is that your style is separated form your code, so you > can hand it off to a designer who may not know Javascript. Also, you > can easily assign special styles to either hover or clicked separately > if you want. > > -E > > On Oct 11, 2:29 pm, jez_p <[EMAIL PROTECTED]> wrote: > > > I'm sure this has a very simple solution, but I am just starting out > > and can't work it out, so I would appreciate it if anyone could give > > me some help. > > > I have a basic text menu, which when the menu items are clicked the > > page content changes. What I want is for the menu item text to change > > color when hovered over - from black to red, and for the menu item > > that has been clicked to be red. The hovering part I have is: > > > $('li a').hover (function() { > > $(this).css({color:'red'}); > > }, > > function(){ > > $(this).css({color:'black'}); > > } > > ); > > > For the clicking part I have: > > > $('li a').click (function() { > > $('li a').css({color:'black'}); //to reset the menu items > > to > > black > > $(this).css({color:'red'}); > > > }); > > > The problem I have is that the mouse pointer is still hovering over > > the menu item after it has been clicked, and when it is moved away it > > resets all the menu items back to black - whereas I want it to be red. > > > I hope I have explained myself clearly.
