Clone CSS class

Question

I want to copy all :hover classes into .hoverid classes where id is the index of the element (or any other way to create unqiue hover classes names).

So, my idea was somehow to iterate through all elements on the page which have a :hover defined and clone that class into .hoverid. This way I could trigger the hover effect on any element I want like this:

$('#element').addClass('hover'+$(this).id);

So my question(s) actually are:

1. How to iterate through elements which have a ":hover" defined?
2. How to clone that class into another class?

Fiddle to try your solutions: http://jsfiddle.net/kLt2P/

Answer 1

You could actually use a library like JSCSSP and parse all CSS files ( $('link['rel="stylesheet"']).attr('href') ) somehow and create classes based on that. Another way would be to parse it yourself with some basic regex. No ideas for now - but i'll try something.

You could use webworkers for performance too.

http://www.glazman.org/JSCSSP/

Answer 2

CSS already does this work for you. In your CSS, put

.hoverid:hover
{
    // your hover styling.
}

To put the "hovering" effect on any element dynamically, then, you would either generate it with class="hoverid" or

$('#element').addClass('hoverid');

hoverid is such an unusual name that I think you mean to have different hovering styles, in which case, just have different CSS classes defining the semantics of the style and why it would behave differently.

For example:

.definition:hover { }
.syntax:hover { }
.useroption:hover { }

And apply the proper semantic CSS class to any element you want. Voila! You'll get proper dynamic results based on the types of your elements.

Understanding that you want to be able to add this class and trigger it "dynamically", you can define the CSS like:

.definitionhover, .definition:hover { }

and then have access to the class through .addClass("definitionhover") while retaining CSS's automated hover formatting.

See http://jsfiddle.net/kLt2P/1/ for how to create a naming convention that lets you do this on individual IDs.

See http://jsfiddle.net/kLt2P/5/ for how to do this without changing the CSS. Note: this parses the actual css so you need as a selector the exact value as defined in the file.

See http://jsfiddle.net/kLt2P/14/ to put both methods together by creating a dynamic stylesheet.

Answer 3

JS and CSS are completely independent of one another. In other words, you cannot access the properties of a CSS class through JS, though you can access the CSS properties of an element, as JS acts on elements.

Solution
You can use some hackish solutions to solve this, but the best solution would probably be to create a "reverse extend" method in jQuery. In other words, you would have to write a method that does the opposite of .extend() by taking two arrays and returning all of the properties in the second that are different from or non-existent in the first array. This is actually not as difficult as it sounds.

What you would do next is take each of the elements on the page and run your "reverse extend" method on them. You would have to pass the array returned by calling the .css() method on the element when not hovering as your first parameter, and the array returned when calling the .css() method on the element while hovering, as your second parameter.

If the resulting array is not empty, then the element does have a :hover class defined (or a JS applied :hover class). Here's the kicker: the resulting array will have all of the properties of the :hover class!

A Note on Capturing Hover:
You can capture the hover by binding mousein, mouseenter, and hover. I recommend using mousein and mouseenter and using a variable flag to indicate if the other was done. As they may run concurrently in some browsers, this may require a little extra funkiness with binding and unbinding the handlers, using the .on and .off methods, to prevent duplicate clones of the class. This implementation should give you support in all major browsers (IE6-10, Safari, Opera, Chrome, and Firefox).
Update: I was incorrect about being able to trigger the pseudo-hover state (sorry about that) - this is impossible through JS. However, you can use this solution for capturing the hover, and then clone the class' properties when it is first hovered. You can then add the hovered element to a jQuery array, which you will use to ensure that you do not look at the same element more than once (using .not). The downside of this is that you will not be able to prevent cloning a :hover pseudo-class more than once, if the same :hover class is assigned to more than one element.

Let me know if you have any questions on this. Good luck! :)