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 ( see http://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.
