toggle css without using toggleclass

Question

I'm trying to toggle some css whilst I hover over a div. Normally I would use 'toggleclass' but the new background color doesn't seem to overwrite the existing class so I resorted to the method below.

The issue is how to toggle the css off after the hover.

$('#menu_first_home').hover(function(){
$(this).css({ 'border': '10px solid rgba(186, 0, 0, 0.2)' });
$('.search-box').css({ 'background-color': 'rgba(186, 0, 0, 0.5)', 'color': 'rgba(186, 0, 0, 0.5)'    });
});

what is the problem when you use toggle class... can you share the code and the css used in that case — Arun P Johny
– Arun P Johny, Commented Oct 13, 2014 at 10:10
when you say toggle class isn't working is it because you have assigned the original colour to the id and then try to overwrite it with the class? — Pete
– Pete, Commented Oct 13, 2014 at 10:22
You should use toggleClass for this. If the rules contained in the new class doesn't apply properly, it's only because you have a CSS specifity problem. — enguerranws
– enguerranws, Commented Oct 13, 2014 at 10:23

Bojan Petkovski · Accepted Answer · 2014-10-13 10:15:45Z

1

ToggleClass should work, but here is an example for your code to change the css attributes on mouseleave

$('#menu_first_home').hover(

function () { // Mouseenter
    $(this).css({
        'border': '10px solid rgba(186, 0, 0, 0.2)'
    });
    $('.search-box').css({
        'background-color': 'rgba(186, 0, 0, 0.5)',
        'color': 'rgba(186, 0, 0, 0.5)'
    });
}, function(){ // Mouseleave
    $(this).css({
        'border': '10px solid rgba(186, 0, 0, 0.2)'
    });
    $('.search-box').css({
        'background-color': 'rgba(186, 0, 0, 0.5)',
        'color': 'rgba(186, 0, 0, 0.5)'
    });

});

answered Oct 13, 2014 at 10:15

Bojan Petkovski

6,9511 gold badge27 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Bhushan Kawadkar · Accepted Answer · 2014-10-13 10:13:28Z

0

You can have CSS classes for border and background color. Add / remove them for hover on and off as shown below -

CSS -

.borderClass{border: 10px solid rgba(186, 0, 0, 0.2);}

.backgroundColorClass{background-color: rgba(186, 0, 0, 0.5);
                      color: rgba(186, 0, 0, 0.5);}

jQuery -

$('#menu_first_home').hover(function(){
   //for hover on
   $(this).addClass("borderClass");
   $('.search-box').addClass("backgroundColorClass");
},function(){
   //for hover off
   $(this).removeClass("borderClass");
   $('.search-box').removeClass("backgroundColorClass");
});

answered Oct 13, 2014 at 10:13

Bhushan Kawadkar

28.6k5 gold badges39 silver badges61 bronze badges

3 Comments

Evgeniy Over a year ago

looks like it may be done shorter -

$('#menu_first_home').hover(function(){         $(this).toggleClass('borderClass');         $('.search-box').toggleClass("backgroundColorClass");     });

Bhushan Kawadkar Over a year ago

but this will toggle class for every mouseenter event only and I think OP want to add color when mouseenter and remove it when mouseleave, correct me if I am wrong.

Evgeniy Over a year ago

if u use single function on hover it will be called on mouseleave and mouseetnter. Looks like result will be same

Prateek · Accepted Answer · 2014-10-13 10:31:48Z

0

You can use jquery hover method along with css classes to solve it. hover method accept two callback function, one when the pointer moves over the item, and one when it leaves:

$(item).hover(function() { ... }, function() { ... });

Instead of adding styles dynamically, define it in css files :

#menu_first_home.hoverClass {
    border-color: rgba(186, 0, 0, 0.2);
}

and on hover, add the class (e.g. "hoverClass") to that particular element, and on mouse out remove it.

Here is the live working demo.

answered Oct 13, 2014 at 10:31

Prateek

4,5302 gold badges19 silver badges22 bronze badges

Collectives™ on Stack Overflow

toggle css without using toggleclass

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related