CODEWITHSUNDEEP
javascriptjquery
tomsseisums
tomsseisums

Reputation: 13367

Remove styles set on specific event

I'm looking for a way to automatically remove styles set on specific event. Maybe I have ust overlooked it, but I have not seen such a feature in jQuery or vanilla js.

The idea:

$(element).hover(function() {
    $(this).css({
        backgroundColor : 'red',
        color : 'white'
    });
}, function() {
    // remove styles set on handlerIn()
}).mousedown(function() {
    $(this).css({
        paddingTop : '+=1px',
        paddingBottom : '-=1px'
    });
}).mouseup(function() {
    // remove styles set on mousedown
});

If I'm using $(this).removeAttr('style'); it will remove not only the styles set by specific event, but everything - where with mousedown / mouseup, that would remove the styles set by hover.

And yes, I know I can hardcode the values back to the defaults - doesn't fit!

What would be the best way to achieve such functionality?

Upvotes: 1

Views: 97

Answers (4)

Ahsan Khurshid
Ahsan Khurshid

Reputation: 9469

EDITED

If you are feasible using arrays then see this solution.

var cssArray = [
    {'background-color':'red','color':'white'},
    {'background-color':'','color':''},    
    {'paddingTop':'+=10px','paddingBottom':'+=10px'},
    {'paddingTop':'','paddingBottom':''}    
]

$('div').hover(function() {
    $(this).css(
        cssArray[0]
    );
}, function() {
    $(this).css(
        cssArray[1]
    ); 
}).mousedown(function() {
    $(this).css(
       cssArray[2]
    );
}).mouseup(function() {
    $(this).css(
       cssArray[3]
    );
});​

SEE DEMO

Upvotes: 1

Vermicello
Vermicello

Reputation: 308

You can declare multiple class on your css and add or remove them 

 $(element).hover(function() {
    $(this).addClass("classHandlerIn");
 }, function() {
    $(this).removeClass("classHandlerIn").addClass("classHandlerOut")
 }).mousedown(function() {
    $(this).addClass("classMouseDown");
 }).mouseup(function() {
    $(this).removeClass("classMouseDown");
 });

Hope this help.

Upvotes: 1

Barlas Apaydin
Barlas Apaydin

Reputation: 7315

First of all there is no $(element) selector.

You can create classes and gave them css properties and use with jQuery addClass() and removeClass() methods for removning specific event.

Note that bind() method is much more solid instead of hover(). Here is working jsFiddle:

$('#element').bind({
    mouseenter :function() {
        $(this).css({
            'background-color': 'red',
            'color': 'white'
        });
    },
    mouseleave: function() {
       $(this).css({
        'background-color': 'white',
        'color': 'black'
       });
    },
    mousedown: function() {
        $(this).css({
            paddingTop : '+=10px'
        });
    },
    mouseup: function() {
        $(this).css({
            paddingTop : '-=10px'
        });
    }
});​

And don't forgot to use CSS Pseudo-classes like :hover and :active selectors. Here link for all of them.

Upvotes: 0

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167192

You can do one thing for this. Declare classes for hover and unhover, something like:

.hover {padding: 5px;}
.unhover {padding: 0px;}

Then you can use .addClass('hover').removeClass('unhover') and the ilk. BTW, this is valid only if you have absolute properties.

Upvotes: 1

Related Questions