jQuery's CSS method overriding :hover properties

Question

<script>
    $(function(){
        $("a.load").click(function (e) { 
            e.preventDefault();
            $("#main").load($(this).attr("href"));
            // alert("#"+($(this).attr("id")));
            $("."+($(this).attr("class"))).css('border-bottom', 'solid 1px black');
            $("."+($(this).attr("class"))).css('background-color', '#F5F5F5');
            $("#"+($(this).attr("id"))).css('border-bottom', 'solid 2px white');
            $("#"+($(this).attr("id"))).css('background-color', 'white');

        });
    });
</script>

Above function works as expected, despite the fact that :hover properties for one of my class stop working after calling this function. So it seems that jQuery's CSS method is overriding :hover properties. Is there a workaround for this?

I tried adding at the end of the function:

$("."+($(this).attr("class"))+":hover").css('border-bottom', 'solid 2px white');

but it doesn't help.

What's the difference between $("#"+($(this).attr("id"))) and $(this)? — Sebastian vom Meer
– Sebastian vom Meer, Commented May 26, 2013 at 19:51
First would return #contact, second: contact. Value of attribute id withouth # at the beginning in CSS would be perceived as an element, not id. — van_folmert
– van_folmert, Commented May 28, 2013 at 18:52

van_folmert · Accepted Answer · 2013-05-26 19:53:52Z

4

I've just discovered !important tag and it did the job! no more overriding!

border-bottom-color: white !important;
border-bottom-width: 2px !important;
background-color: white !important;

answered May 26, 2013 at 19:53

van_folmert

4,60911 gold badges53 silver badges99 bronze badges

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

2 Comments

Dom Over a year ago

IMHO using !important is not the best way to go about this.

Jonas Over a year ago

may not be the best way, but works like a charm as a quick fix to make the deadline. thank you!

Ven · Accepted Answer · 2013-05-26 19:51:37Z

3

jQuery is not meant to deal with CSS. pseudo-selectors do not exist in the DOM.

Instead, extract your css, and toggle the class with jQuery (addClass/removeClass/toggleClass)

answered May 26, 2013 at 19:51

Ven

19k2 gold badges44 silver badges62 bronze badges

Collectives™ on Stack Overflow

jQuery's CSS method overriding :hover properties

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related