If you're only trying to get a color change on an anchor when you
hover, then just do that with CSS - there's no need to use javascript
for that
li a { color: black }
li a:hover { color: red }
The only real hitch is if you're trying to hover over something other
than an anchor (like a div or a span), and you have to support IE6.
IE6 only supports hover on anchors, while every other modern browser
supports hover on just about anything. (IE7+ properly support hover)
rolfsf
On Oct 11, 12:56 pm, jez_p <[EMAIL PROTECTED]> wrote:
> 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.
