0

Imagine an icon embedded in text that should be perceived as its part and behave like a letter. To achieve this it should have the same color as the text around. Finding the right color is easy in jQuery.

The problem is that the color may change. Either a script may change the CSS value, or a different value may be set in the :hover pseudoclass, and so on. In the case I've run onto it's the :hover value of a div several levels above. The text color around the icon changes, but how can I detect this event in order to adjust the icon itself?

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Hubert OG
  • 19,314
  • 7
  • 45
  • 73
  • 2
    Maybe a duplicate: http://stackoverflow.com/questions/1397251/event-detect-when-css-property-changed-using-jquery – dknaack Dec 06 '11 at 14:01
  • Not exactly, I know that question. The mentioned method works (or at least should) when the attribute of a certain div is changed. In my case, it is possible that the change is several levels above, not directly. The color still changes (and that's what I would like to detect), but the `DOMAttrModified` event is not fired. – Hubert OG Dec 06 '11 at 14:16

1 Answers1

0

I might be mistaken but I am sure that there is no such thing than a "change event" for CSS styles. In some modern browsers there is a DOMSubtreeModified event, but I don't think that this will even be triggered merely by changing an attribute like this.

So the only way to determine changes here would be to set an interval (window.setInterval) and check for changes every x milliseconds (choose a suitable x here).

devnull69
  • 16,402
  • 8
  • 50
  • 61
  • I'm afraid that this won't work. For example, try moving your mouse over the column of links on the right. What interval will be suitable to detect all the underline changes? `1ms`? How would the page work if it had 1000 such intervals running? – Hubert OG Dec 06 '11 at 14:12