Assinging element's hover css properties to some other element

Question

I have an anchor tag with some css hover selection property assigned. This CSS is auto-generated by the system.

a.abcClass{
    color: GREEN;
}
a.abcClass:hover{
    color: RED;
}

I would like to assign above given hover CSS dynamically using jQuery. Like I would like to achieve this:

$("a.abcClass").addClass(":hover")

How this can be done ?

Edit: hover properties will be applied only when mouse will be hover over that element. What if I want to have hover effect on anchor tag when some button is clicked. As this CSS is autogrnerated I don't know about its css properties.

So you want to overwrite the auto-generated CSS with jQuery? — hungerstar, Jul 04 '13 at 19:29
I just want to use that. In the given case I want to use "a.abcClass:hover". — Nav Ali, Jul 04 '13 at 19:30
But you want all `a.abcClass` to look like `a.abcClass:hover`? — hungerstar, Jul 04 '13 at 19:31
OP, you can't add `pseudo-classes` in css like that. Just make a new class (no hover etc) and add that one. — OptimusCrime, Jul 04 '13 at 19:40
I am not sure if I understood your question correctly but by any chance are looking to dynamically get all properties of an element and assign it to another element? If so, http://stackoverflow.com/questions/754607/can-jquery-get-all-css-styles-associated-with-an-element — Learner, Jul 04 '13 at 20:00

score 0 · Answer 1 · answered Jul 04 '13 at 19:32

0

Will this work?

$('.abcClass').css('color','red');

answered Jul 04 '13 at 19:32

hungerstar

21,206
6
50
59

I dont know whats in there in that property as it is auto-generated. – Nav Ali Jul 04 '13 at 19:35
I think I gotcha. You need to be able to get the properties of `.abcClass:hover`, whatever they are, and then apply them back to `.abcClass`? – hungerstar Jul 04 '13 at 19:54
@hungstar: I don't have enough reputation to down-vote anyone. – Nav Ali Jul 05 '13 at 17:20

Learner · Answer 2 · 2013-07-04T19:51:23.717

0

Handle Hover state using jQuery:

$(function() {
    $('.abcClass').hover( function(){
          $(this).css('color', 'red');
    });
});

Handle both states using jQuery:

$(function() {
   $('.abcClass').hover( function(){
      $(this).css('color', 'red');
   },
   function(){
      $(this).css('color', 'green');
   });
});

Sample Fiddle: http://jsfiddle.net/VcEf4/

edited Jul 04 '13 at 19:51

answered Jul 04 '13 at 19:35

Learner

3,904
6
29
44

When passing as an object, I don't think you need the quotes around the key. – OptimusCrime Jul 04 '13 at 19:39

score -1 · Answer 3 · answered Jul 04 '13 at 19:42

-1

a.abcClass{
    color: GREEN;
}
a.abcClass:hover, .my_epic_stylez {
    color: RED;
}

And:

$(".my_epic_stylez").addClass(":hover");

You can't add pseudo-classes like you are trying to do. The same goes for adding :before and :after-classes too.

answered Jul 04 '13 at 19:42

OptimusCrime

14,662
13
58
96

Yeah I know I cant add, I am just giving example of what I am trying to achieve (with some other syntax). – Nav Ali Jul 04 '13 at 19:45

Assinging element's hover css properties to some other element

3 Answers3