CSS Cloning Class

Question

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

So, my idea was to somehow iterate over all the elements on the page that have :hover , and clone this class in .hoverid . Thus, I could trigger a hover effect on any element that I want:

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

So my questions are:

• How to iterate over elements that have ": hover"?
• How to clone this class into another class?

Try your solutions: http://jsfiddle.net/kLt2P/

Answer 1

CSS already does this for you. In CSS add

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

To dynamically hang on any element, you either generate it using class="hoverid" or

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

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

For instance:

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

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

Understanding that you want to be able to add this class and run it “dynamically”, you can define CSS as:

 .definitionhover, .definition:hover { } 

and then access the class via .addClass("definitionhover") while maintaining CSS auto-hover formatting.

See http://jsfiddle.net/kLt2P/1/ for how to create a naming convention that allows you to do this on separate identifiers.

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

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

Answer 2

JS and CSS are completely independent of each other. In other words, you cannot access CSS class properties through JS, although you can access element CSS properties because JS acts on elements.

Decision
You can use some hacker solutions to solve this problem, but the best solution would probably be to create a "reverse pass" method in jQuery. In other words, you need to write a method that does the opposite of .extend() , taking two arrays and returning all the properties in the second that are different from or do not exist in the first array. This is actually not as difficult as it seems.

What would you do next is to take each of the elements on the page and run your “backtrack” method on them. You will need to pass in the array returned by the .css() method call in the element when it does not hang as your first parameter, and the array is returned when the .css() method is called for the element during the hang as the second parameter.

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

Guidance Capture Note:
You can capture hover by mousein , mouseenter and hover . I recommend using mousein and mouseenter and using a variable flag to indicate whether another has been executed. Since they can run simultaneously in some browsers, this may require a bit of extra funkiness with binding and untying handlers using the .on and .off to prevent duplication of class clones. This implementation should provide support in all major browsers (IE6-10, Safari, Opera, Chrome, and Firefox).
Update: I was incorrect about the possibility of triggering a pseudo-freeze state (sorry for that) - this is not possible through JS. However, you can use this solution to capture a hang, and then clone the class properties when it first hangs. You can then add the hovered element to the jQuery array, which you will use to make sure that you do not look at the same element more than once (using .not ). The disadvantage of this is that you cannot prevent the cloning of the :hover pseudo-class more than once if the same :hover class :hover assigned to more than one element.

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

Answer 3

In fact, you can use a library like JSCSSP and parse all CSS files ( $('link['rel="stylesheet"']).attr('href') ) somehow and create classes based on this. Another way is to parse it with some basic regular expression. There are no ideas yet, but I will try something.

You can also use webmasters to increase productivity.

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