jQuery document layout (multiple functions)

Question

So I am a junior c# developer, and at the moment I am currently writing up a new website for myself. I am currently trying to make it so that I am able to have a class on say, an anchor tag called "default", then when you are to mouseenter() over the anchor, it will remove the class and then add the class of "hover".

Then when you mouseleave(), the "hover" class is then removed, and the "default" class is then appended again.

And then I will also have a click() call to remove "default" or "hover", to then append the class of "active"

I am having a bit of trouble with how to layout my .js document, it is quite a noobish question to ask really... But I am just not sure as to how I can write up a .js document, and have these multiple calls to different functions depending what is happening to the anchor element, all in the one document.

Any help is appreciated, cheers,
- Adam

CSS for `a` tags (link, visited, hover, active) why don't you use these? — Roko C. Buljan, Dec 29 '12 at 11:31
Welcome to SO. Please participate to comments and answers, read the FAQ and don't forget to accept and later vote on answers and questions — Roko C. Buljan, Dec 29 '12 at 11:35
Hi roxon, thanks for the tip. I did concider using pseudo classes for elements, however I was trying to do somewhat of a different approach :) — OhTehNoes, Dec 30 '12 at 13:51

score 1 · Answer 1 · answered Dec 29 '12 at 12:36

Links can be styled with any CSS property (e.g. color, font-family, background, etc.).

Special for links are that they can be styled differently depending on what state they are in.

The four links states are:

a:link - a normal, unvisited link
a:visited - a link the user has visited
a:hover - a link when the user mouses over it
a:active - a link the moment it is clicked

Therefore you can set the style for the link as

a.default         {color:#336699;} 
a.default:link    {color:#FF0000;}      
a.default:visited {color:#00FF00;}  
a.default:hover   {color:#FF00FF;}  
a.default:active  {color:#0000FF;}

DEMO HERE

Reference: w3schools

Hi Palash, thanks for the tip. As I mentioned to both David and roxon, I was trying for a different approach instead of simply using pseudo classes :) — OhTehNoes, Dec 30 '12 at 13:56

David Thomas · Accepted Answer · 2012-12-29T11:36:53.730

0

To do this with jQuery:

$('a.default').hover(
    function(){
        $(this).toggleClass('default hover');
    },
    function(){
        $(this).toggleClass('default hover');
    });

JS Fiddle demo.

Or you could use:

$('a.default').hover(
    function(){
        $(this).removeClass('default').addClass('hover');
    },
    function(){
        $(this).removeClass('hover').addClass('default');
    });

JS Fiddle demo.

But, honestly, CSS would work just as well and be far more simple:

a.default:link,
a.default:visited {
    /* default styles */
}

a.default:hover,
a.default:active {
    /* hovered styles */
}

JS Fiddle demo.

References:

edited Dec 29 '12 at 11:36

answered Dec 29 '12 at 11:31

David Thomas

249,100
51
377
410

Hi david, thanks very much for your response. I did take into concideration using pseudo classes for elements with CSS. I guess I just wanted to make things a bit different by using jquery to alter my states with class names, then simply change the class CSS to match the class of the element. Nonetheless, I appreciate your jquery demonstrations and tips :) – OhTehNoes Dec 30 '12 at 13:46

jQuery document layout (multiple functions)

2 Answers2