How can you select multiple css attributes in jquery?

Question

Hi I'm a new jquery user, and I need some help.

I'm trying to change a css :hover attribute of a last child div element upon a click of that div. More specifically, I have a nav-bar div with some child div buttons in it. The child divs are all a par of the same class so that when I hover over them...a border-width attribute changes. I would like it so that when I click last child div, the border color is changed, but still only shows when the mouse is hovering...and when I click it again, I would like the original border attributes defined in the css to retake effect.

Here is a sample of what I'm trying to do:

$("div.navbar:last").click(function(){    
    if ($("div#details").is(":hidden")){    
        $("div#details").fadeIn(100);    
        $("div.navbar:hover").css("border-bottom-color","#ee4444");
    } else {
        $("div#details").fadeOut(100);
        $("div.navbar").css("border-bottom-color","#88ddff");
    }   
});

Any help is appreciated.

@adeneo More accurately, JavaScript cannot alter pseudo selectors. — Blazemonger
– Blazemonger, Commented Apr 2, 2013 at 18:06

zzzzBov · Accepted Answer · 2013-04-02 18:04:42Z

4

You can't use the :hover selector in jQuery. You should avoid using the .css() method, and instead use addClass, removeClass, and toggleClass to change DOM state.

Actual CSS can then take over and use the classes as styling hooks to change how the page is rendered.

answered Apr 2, 2013 at 18:04

zzzzBov

180k57 gold badges328 silver badges375 bronze badges

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

Comments

cereallarceny · Accepted Answer · 2013-04-02 18:06:04Z

0

As Adeneo stated, you can't use psuedo selectors (like :hover) in jQuery. If you want to attach a hover event in jQuery you could however use something like the following:

$("#myElement").on('hover', function() {
    alert("I've been hovered over!");
});

answered Apr 2, 2013 at 18:06

cereallarceny

4,9934 gold badges41 silver badges75 bronze badges

Comments

coulbourne · Accepted Answer · 2013-04-02 18:16:30Z

0

You can put the pseudoclass on a secondary class which you add on click

JS

  $("div.navbar:last").click(function(){    
    if ($("div#details").is(":hidden")){    
        $("div#details").fadeIn(100);    
        $("div.navbar").addClass("hoverBottom");
    } else {
        $("div#details").fadeOut(100);
        $("div.navbar").css("border-bottom-color","#88ddff");
    }  
    });

CSS

.hoverBottom:after {
  border-bottom-color","#ee4444";
}

answered Apr 2, 2013 at 18:16

coulbourne

5291 gold badge8 silver badges16 bronze badges

Collectives™ on Stack Overflow

How can you select multiple css attributes in jquery?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related