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

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.