CODEWITHSUNDEEP
javascriptcsshoverdom-events
bopjesvla
bopjesvla

Reputation: 763

Fire event if the CSS style is changed by the user?

I'm writing a lightweight htc program for IE 9 (Javascript). CSS3 has a new property called transition, but it doesn't work in IE 9. I'm trying to implement this, but I need to know when a property changes. I'm familiar with DOMAttrModified and onpropertychange, but they don't trigger if CSS changes the property:

a {
color:#FFF;
}

a:hover {
color:#000;
}

If you mouseover an anchor, DOMAttrModified doesn't do anything. I could use mouseover, mouseout, blur, focus, activate and deactivate and check every time they occur if a property changed, but what if:

div:hover a {
color:#FFF;
}

The user didn't hover the anchor tag, but CSS changed the color anyway. I think pie.htc has the same problem. I only need a solution compatible with IE 9...

Upvotes: 6

Views: 527

Answers (3)

Madara's Ghost
Madara's Ghost

Reputation: 174957

A simpler and more cross browser would be to user Modernizr or a similar javascript application to test for the browser's ability to preform transition, if it cannot, it will add a class name to the root element, which you can target easily with jQuery or a similar framework:

$('.notransition div').hover(function() {
    $a = $(this).find('a');
    //Then animate $a.
}, function() { ... });

That way you can use the native property if possible, and if not, fallback to jQuery.

Upvotes: 0

Molecular Man
Molecular Man

Reputation: 22386

I think matrix filter might help you.

Additionally, I recommend Cross-Browser Animated CSS Transforms — Even in IE

Upvotes: 0

Jeff
Jeff

Reputation: 2808

I don't think there's an event for "onCSSChange"

How about running a subroutine every 50 ms and checking the current styling. If the CSS changes, you can fire your own event.

Upvotes: 2

Related Questions