I have 4 links that change the position of 4 divs inside a web page. I am using the following jQuery script to change the color of the links when I hover them.
$('a.menua').hover(function(){
$(this).css({'color':'#2EC7C7'});
},
function(){
$(this).css({'color':'white'});
});
how can i modify this script so that when i click a link it keeps the color from hover and not change when i take my mouse off of it?
$('a.menua').click(function(){
//content
});
I would use CSS for all of the styling, like this:
a.menua { color: white; }
a.menua:hover, a.menua.clicked { color: #2EC7C7; }
Then only use jQuery just toggle that class using .toggleClass() like this:
$('a.menua').click(function(){
$(this).toggleClass('clicked');
});
Or, if you want only one active at a time:
$('a.menua').click(function(){
$('a.menua').removeClass('clicked');
$(this).addClass('clicked');
});
This makes your code simpler, lighter, and easier to maintain. Also it keeps your styling information where (if at all possible) it belongs, in the CSS.
$(this).toggleClass('clicked'); with $('a.menua').removeClass('clicked'); $(this).addClass('clicked');The only part that should require JS is for the link to keep the same color after you take your mouse off of it. CSS alone will let you control what color it has when you're hovering (with a:hover) and during the mouse click (with a:active).
Craver's suggestion to add a class with jQuery should take care of keeping the color after you move away, and as he said, it's nice to keep the style info in your CSS.
If you use all four possible link styles, make sure you put them in this order:
a:link { }
a:visited { }
a:hover { }
a:active { }
You can remember it with LoVe HAte - Link, Visited, Hover, Active.
One other thought - you're trying to make the link color identical during hover and click. I'd suggest it may be better to let them be a little different. Having the color change during the click gives the user visual feedback that they hit the target.
use element.Data:
$('a.menua').hover(function(){
$(this).css({'color':'#2EC7C7'});
}, function(){
if($(this).data("is-clicked") === false){
$(this).css({'color':'white'});
}
}).live("click", function(){
$(this).data("is-clicked", !$(this).data("is-clicked"));
});;
But Nicks css version is probably the better way to go.
I think you want this: live solution
So, I use jQuery to add classes to links. I also set the script to let only one item be active at a time (that's the main difference between this solution and Nick's).
update:
The hovering-effect is now also CSS based (That is what the :hover pseudo class is for). So you only use jQuery to set the "active" state of the link.
HTML:
<a class="menulink" href="#">Link 1</a>
<a class="menulink" href="#">Link 2</a>
<a class="menulink" href="#">Link 3</a>
CSS:
a { color: #00f; }
a:hover, a.active { color: #f00; }
JS:
$('.menulink').click(function(){
$(this).addClass("active").siblings().removeClass("active");
});
Add a class after click.
css
.somecolor {color:#2EC7C7}
js
$('a.menua').click(function(){
var $this = $(this);
if($this.hasClass("somecolor")){
$(this).removeClass("somecolor");
}else{
$(this).addClass("somecolor");
}
});
$('a.menua').hover(function(){
$(this).css({'color':'#2EC7C7'});
},
function(){
$(this).css({'color':'inherit'});
});
I haven't tested it, but this might work:
$('a.menua').click(function(){
$('a.menua').unbind('mouseleave');
});
js:
var link='null';
$('a.menua').click(function(){
$(link).removeClass('clicked');
$(this).addClass('clicked');
link=$(this);
css:
a.menua {
color: white;
text-decoration:none;
}
a.menua:hover, a.menua.clicked {
color: #2EC7C7;
}