JS off-hover?

[nlfatkid]

I have this rollover on this site im working on: Click here and see mid way down the page.

The client now wants a default text, when not rolling over the links on the left.

This is my js:

$(document).ready(function() {

$('input, textarea').example(function() {

return $(this).attr('title');

});

$('div.aside li.one span').hover(function() {

$('div.aside li span.current').removeClass('current');

$(this).addClass('current');

$('div.content li.on').removeClass('on');

$('div.content li.water').addClass('on');

});

$('div.aside li.two span').hover(function() {

$('div.aside li span.current').removeClass('current');

$(this).addClass('current');

$('div.content li.on').removeClass('on');

$('div.content li.land').addClass('on');

});

$('div.aside li.three span').hover(function() {

$('div.aside li span.current').removeClass('current');

$(this).addClass('current');

$('div.content li.on').removeClass('on');

$('div.content li.education').addClass('on');

});

$('div.aside li.four span').hover(function() {

$('div.aside li span.current').removeClass('current');

$(this).addClass('current');

$('div.content li.on').removeClass('on');

$('div.content li.energy').addClass('on');

});

$('div.aside li.five span').hover(function() {

$('div.aside li span.current').removeClass('current');

$(this).addClass('current');

$('div.content li.on').removeClass('on');

$('div.content li.work').addClass('on');

});

$('div.aside li.six span').hover(function() {

$('div.aside li span.current').removeClass('current');

$(this).addClass('current');

$('div.content li.on').removeClass('on');

$('div.content li.lifeskills').addClass('on');

});

$('div.aside li.seven span').hover(function() {

$('div.aside li span.current').removeClass('current');

$(this).addClass('current');

$('div.content li.on').removeClass('on');

$('div.content li.conservation').addClass('on');

});

$('div.aside li.eight span').hover(function() {

$('div.aside li span.current').removeClass('current');

$(this).addClass('current');

$('div.content li.on').removeClass('on');

$('div.content li.about').addClass('on');

});

});

Help?
Sorry I’m kind of a newbie to JS.

[JediN1nja]

I don’t know if this will help, because I am pretty much a JQuery noob as well.
But if I understand you correct, try this:

$("#button").hover(function() {

//insert hover state

}, function() {

//insert non-hover state

});

[nlfatkid]

Hmmm… so I need to remove the current class and then add in a different div.
Not 100% sure on how to do that…

[Vinnix]

Hey,

So something to consider using the .each() in jQuery like

$(‘div.aside li’).each(function(){
//Whatever code your using for each call
})

Sounds like you want a mouse out event? So if they don’t select anything (or the mouse leaves) Returns to default text?

Grab the container and do a mouse Leave Event

$(“div.aside”).mouseleave(function(){
//Display default infomationz
});

Hope this helps

-Vinny

ps.- I’m in CO!

[nlfatkid]

Post moved (not answered… just yet):
http://forum.jquery.com/topic/deafult-text-w-hover

@Vinnix: danke!

[Author]

Posts