sIFR hover issue

Question

I am using an unordered list for navigation and I want to use sIFR in it (I know it is not recommended, but there is no alternative right now). The list items contain a div which is replaced by sIFR.

The HTML:

<ul class="topnav">
     <li class="category">
        <div>
           <a href="#" title="Home">Home</a>
        </div>
     </li>
     <li class="category>
        <div>
            <a href="#">Link</a>
        </div>
    </li></ul>

I use this sIFR config:

sIFR.replace(myfont, {
selector: '.topnav li.category div',
  css: ['.sIFR-root { font-size:17px; }',
  'a:link { color:#a73759; text-decoration:none; }',
  'a:hover {color:#ffffff;}',
  ],
  wmode: 'transparent',
  fitExactly: true, 
 });

The hover is working, but only when I hover over the actual flash file. The text color should be white when I hover over the list item, which is a parent of the replaced div. How do I accomplish that?

Answer 1

I haven't used sIFR, but it seems you need to modify your selector, since it's only aimed at the <div> inside the list item.

Or it's simply because you need to add li:hover a { color: white } (just remember that this isn't supported by IE6, and it might also be misleading, since clicking the <li> won't actually trigger the link)

Answer 2

Am I right in assuming that you want a Flash movie to be replaced with another Flash movie on hover? In that case sIFR poses a problem because sIFR does not render elements that aren't shown on pageload. You can test that by hiding a p element with text using CSS, and then try to sIFR that text, it won't work.

The reason for this inability to render invisible elements, imho, has to do with the fact that sIFR can't figure out how the element is supposed to look like normally, and therefore doesn't know how to replace that element.

Answer 3

The easiest answer really is that the Flash movie should be the full width and height of the tab.

The complicated answer is that you use JavaScript to tell the Flash movie to change color, but that's hardly worth the trouble.

Answer 4

I had exactly the same problem, here's how I fixed it:

<ul class="navContainer">
<li><div><a href="...">Link</a></div></li>
</ul>

sIFR.replace(myriadpro, {
  selector: 'ul.navContainer li div ',
  css: '.sIFR-root { background-color: transparent; color: #ffffff; font-weight: bold;text-align:center;} a {color: #ffffff; text-decoration:none;} a:hover {color:#482566; background: #f4f3f8;text-decoration:none}',
  wmode: 'transparent',
  tuneHeight: 15,
  offsetTop: 8,
  onRollOver: function(fi){
      fi.changeCSS( '.sIFR-root {background-color: #f4f3f8; color: #482566; font-weight: bold;text-align:center;} a {color: #482566; text-decoration:none;} a:hover {color:#482566; background: #f4f3f8;text-decoration:none}');
    },
  onRollOut: function(fi) {
      fi.changeCSS( '.sIFR-root { background-color: transparent; color: #ffffff; font-weight: bold;text-align:center;} a {color: #ffffff; text-decoration:none;} a:hover {color:#482566; background: #f4f3f8;text-decoration:none}');
    }
});

tuneHeight made the movie fit the size of my LI, and offsetTop pushed the link inside to be centred vertically.