CODEWITHSUNDEEP
jqueryclickhover
Bogdan
Bogdan

Reputation: 461

jQuery hover and click function

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
});

Upvotes: 1

Views: 10550

Answers (7)

Nick Craver
Nick Craver

Reputation: 630379

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.

Upvotes: 8

Justus Romijn
Justus Romijn

Reputation: 16019

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");
});

Upvotes: 1

Bogdan
Bogdan

Reputation: 461

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;
}

Upvotes: 0

Nathan Long
Nathan Long

Reputation: 125902

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.

Upvotes: 3

Psytronic
Psytronic

Reputation: 6113

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.

Upvotes: 1

Marcelo Cantos
Marcelo Cantos

Reputation: 185842

I haven't tested it, but this might work:

$('a.menua').click(function(){
    $('a.menua').unbind('mouseleave');
});

Upvotes: 0

red-X
red-X

Reputation: 5128

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'});
});

Upvotes: 0

Related Questions