Html – sIFR hover issue

csshtmlsifr

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?

Best Answer

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)

Related Topic