I've noticed similar behavior when using rotation- if I set rotation through code, it gets overridden by the Edge timeline. So I'm assuming Edge timeline object settings override external css settings.
My solution was to manually reset the rotation of my object, at the point when Edge was resetting it. So in your case, you can hack it by manually resetting the css background color of your rectangle to black, on mouseover and mouseout.
I also considered this, and am using it as a work around for now. Unfortunately, however, it doesn't scale very well if you need to modify multiple properties, or multiple instances of the same symbol, or add a bunch more labels.
If I want to change the rotation, width, background color, and transparency, I need to rewrite 4 overrides for every label. If I have 4 labels, then suddenly I'm up to 16 overrides. If I want 4 instances of the same symbol but each with those properties modified differently (ie: different rotation for each instance) then I need to write a total of 64 overrides. This also means that once I have that set up, if I want to override 1 more property, or one more label, or add one more instance, I need to remember all of the previous properties I changed and add those accordingly. This can quickly spiral out of control.
Thanks for the idea though, and like I said, I'm using it as a work around for now.
I feel your pain. Btw - if you are implementing this hack, I'd definitely look into using the GSAP library to set the CSS props, rather than manually setting the CSS props- GSAP takes care of all the cross-browser prefixes for you.
We talked about that but when you have a big project with lots of elements, it is a pain and adds many lines of code!
If I want to change the rotation, width, background color, and transparency, I need to rewrite 4 overrides for every label.
I've been looking at your file. (thanks resdesign for pointing me to your post)
Are you certain that all dynamically set CSS properties revert when you stop at a label? I've seen background-color fail in your example file, and we're looking into that. But other properties don't show this behavior - so it may not be quite as bad as it seems at the moment.
A more scalable way to work around this may be to instead use a stylesheet or inline CSS with classes, and then assign the class dynamically to an element using jQuery's addClass method. A quick check of this showed that background-color was retained, when using the same type of scenario as your example file.
I haven't tested all CSS properties. I have a complicated project in which this is happening to the font size, so I made a simple example project and happened to pick background color. I had (probably incorrectly) assumed because it was on fonts and background color, it was on all CSS properties. Unfortunately I haven't been successful with creating a simple project with the font changing so now I'm really not sure how many properties this affects.
Any chance I could take a peek at your complicated project where this was happening with font size? We'd like to know what's going on with it. If you'd rather not post the project in the forum, please PM me with further details.
I've PMed you with the project. If a solution comes from this exchange, I'll make sure it gets posted here
I just wanted to update this thread for anyone who is following. I have stumbled across another example where I'm vertically centering text and that gets overridden by going to a particular label on mouseover.
The relevant project can be found here (http://static-media-live-ultimate-playtoga.s3.amazonaws.com/ultimate/adobe_stop_css_overri de_bug/AdobeBug2.zip) for anyone who wants to play with it. Just mouseover the box and the text will change location incorrectly.