CODEWITHSUNDEEP
jqueryclassclickhover
novoa
novoa

Reputation: 125

.click not working

I'm trying to get the action when click and hover (margin-left + border-bottom) the .hover it's fine... but my .click doesn't work, i tried this:

$(".border").hover(
    function(){
        $(this).switchClass( "border", "border_active", 500 );
        return false;
    }
    ,function(){
        $(this).switchClass( "border_active", "border", 400 );
        return false;
    }
);  
$(".border").click(
    function(){
        $(this).removeClass('border');
        $(this).addClass('border_active')
    }
    ,function(){
        $(this).removeClass('border_active');
        $(this).addClass('border');
    }
);

but nothing, here's the hole code: http://jsfiddle.net/Fe6pE/13/, please show me the best way to get this working, Thanks

Upvotes: 0

Views: 168

Answers (3)

techfoobar
techfoobar

Reputation: 66663

In jQuery, click() does not take in 2 function arguments.

What you need to use instead is mousedown() and mouseup()

Or even better, you can avoid JavaScript and structure your CSS like:

.border {
    /* normal styles */
}
.border:hover {
    /* styles when hovered */
}
.border:active {
    /* styles when mouse is down */
}

Upvotes: 0

Jamie Hutber
Jamie Hutber

Reputation: 28076

As i mentioned in the comments, just add toggleClass to it?

$(".border").click(function(){
    $(this).toggleClass('border');
    $(this).toggleClass('border_active');
});

Upvotes: 0

Jeff Shaver
Jeff Shaver

Reputation: 3355

To do this, just use toggleClass;

$('.border').click(function() {
    $(this).toggleClass('border-active border');
});

This will just alternate the classes. If border-active is on to start with, then clicking it will turn border-active off and border on.

Upvotes: 2

Related Questions