sIFR 悬停问题答案

【问题标题】：sIFR hover issuesIFR 悬停问题
【发布时间】：2011-04-19 03:44:41
【问题描述】：

我正在使用无序列表进行导航，我想在其中使用 sIFR（我知道不推荐，但目前没有其他选择）。列表项包含一个被 sIFR 替换的 div。

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>

我使用这个 sIFR 配置：

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, 
 });

悬停有效，但仅当我将鼠标悬停在实际的 Flash 文件上时。当我将鼠标悬停在列表项上时，文本颜色应为白色，该列表项是替换 div 的父项。我该如何做到这一点？

【问题讨论】：

一个示例页面将有助于理解和调试问题。

标签： html css sifr

【解决方案1】：

我没用过sIFR，不过好像你需要修改你的selector，因为它只针对列表项内的<div>。

或者只是因为您需要添加li:hover a { color: white }（请记住，IE6 不支持此功能，并且还可能会产生误导，因为单击<li> 实际上不会触发链接）

【讨论】：

不，如果你使用 "li:hover a" 它不会起作用，因为锚点已经被 sIFR 替换了。
这就是我认为您需要更改选择器的原因。列表元素中的<div> 是否有原因？
div 的原因是标签的样式。制作圆形标签需要两个元素，因此列表项和 div 上都有背景图像。如果我以列表项为目标，则 div 样式将不再起作用，如果我以锚点为目标，则悬停将根本不起作用。

【解决方案2】：

我是否正确假设您希望在悬停时将 Flash 电影替换为另一个 Flash 电影？在这种情况下，sIFR 会出现问题，因为 sIFR 不会呈现页面加载中未显示的元素。您可以通过使用 CSS 隐藏带有文本的 p 元素来测试它，然后尝试 sIFR 该文本，它不会起作用。

恕我直言，无法渲染不可见元素的原因与 sIFR 无法弄清楚该元素的正常外观有关，因此不知道如何替换该元素。

【讨论】：

【解决方案3】：

最简单的答案就是 Flash 影片应该是标签页的全宽和全高。

复杂的答案是您使用 JavaScript 来告诉 Flash 电影改变颜色，但这并不值得麻烦。

【讨论】：

但是，如果我将 Flash 影片设置为完整的宽度和高度（使用 TuneWidth 和 TuneHeight），当我将鼠标悬停在文本上时，它仍然会改变颜色，而不是当我将鼠标悬停在 Flash 影片的其他部分上时.
确保影片中除了链接外没有其他内容。所以链接后面的句号不是<a>text</a>.。

【解决方案4】：

我遇到了同样的问题，我是这样解决的：

<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 使电影适合我的 LI 的大小，并且 offsetTop 将内部的链接推到垂直居中。

【讨论】：