title: sIFR dynamically changing the color of text onhover of parent element
body: <p>I'm using sIFR to style headings and want to dynamically change the color of text (within the flash movie) onhover of parent element.</p>
  
  <p>How would one do this? Any examples? I have never seen it done.</p>
  
  <pre><code>&lt;ul class="tab"&gt;
      &lt;li id="tab2"&gt;
          &lt;a href="#two"&gt;
              &lt;span class="organisation sIFR-replaced" style=""&gt;
                  &lt;object width="300" height="31" class="sIFR-flash" type="application/x-shockwave-flash" id="sIFR_replacement_5" name="sIFR_replacement_5" data="fla/gothamBook.swf" style=""&gt;
                      &lt;param name="flashvars" value="id=sIFR_replacement_5&amp;amp;content=Bureau%2520ICE&amp;amp;width=300&amp;amp;renderheight=31&amp;amp;link=&amp;amp;target=&amp;amp;size=25&amp;amp;css=.sIFR-root%257Bcolor%253A%2523d7d9e3%253Bletter-spacing%253A0.05%253B%257Da%257Btext-decoration%253Anone%253B%257Da%253Alink%257Bcolor%253A%2523d7d9e3%253B%257Da%253Ahover%257Bcolor%253A%2523ffffff%253B%257D&amp;amp;cursor=default&amp;amp;tunewidth=0&amp;amp;tuneheight=0&amp;amp;offsetleft=&amp;amp;offsettop=&amp;amp;fitexactly=false&amp;amp;preventwrap=false&amp;amp;forcesingleline=false&amp;amp;antialiastype=&amp;amp;thickness=&amp;amp;sharpness=&amp;amp;kerning=&amp;amp;gridfittype=pixel&amp;amp;flashfilters=&amp;amp;opacity=100&amp;amp;blendmode=&amp;amp;selectable=true&amp;amp;fixhover=true&amp;amp;events=false&amp;amp;delayrun=false&amp;amp;version=436"/&gt;
                      &lt;param name="wmode" value="transparent"/&gt;
                      &lt;param name="bgcolor" value="transparent"/&gt;
                      &lt;param name="allowScriptAccess" value="always"/&gt;
                      &lt;param name="quality" value="best"/&gt;
                  &lt;/object&gt;
                  &lt;span class="sIFR-alternate" id="sIFR_replacement_5_alternate"&gt;Bureau ICE&lt;/span&gt;
              &lt;/span&gt;
          &lt;/a&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>I've tried the following which seems logical... but it doesn't work. It's the span.organisation in the  i'm trying to change!</p>
  
  <pre><code>sIFR.replace(gothamBook, {
      wmode: 'transparent',
      selector: 'span.organisation'
      ,css: [
      '.sIFR-root { color: #d7d9e3; background-color:#61648a; letter-spacing:0.05; }'
      ,'a span.organisation { text-decoration: none; }'
      ,'a:link span.organisation { color: #d7d9e3; }'
      ,'a:hover span.organisation { color: #ffffff; }'
    ]
  });
  </code></pre>