sIFR3：通过 CSS 而不是 JS 控制内部的 a 和 a:hover 样式

Question

为了在我的网站上对 sIFR 功能进行优雅的降级和最少的编码，我希望尽可能在 CSS 中定义样式。我所做的如下：

• 定义一个由 sIFR3 替换的 H3 标签。

• H3 根据 CSS 的容器而呈现出不同的颜色，例如：

body.blue-txt h3{ color: #009CDA; }
body.white-txt h3{ color: #FFFFFF; }
body.yellow-txt h3{ color: #FFFF00; }
body.etc....

• H3 可能 包含一个锚点（我知道语义问题，但这就是目前的情况...抱歉）

通过设置：

sIFR.useStyleCheck = true;

我认为 sIFR3 会显示替换的正常 H3 文本，并使用我的 CSS 样式表中的正确颜色。到目前为止，一切都很好： 我可以通过使用 sIFR.replace() 的 css 参数来调整 sifr-config.js 中的蓝色文本：

sIFR.replace(futura, {
  selector: 'body.blue-txt h3',
  css: 'a {color: #009CDA; }, a:hover { color: #009CDA; text-decoration: underline; }'
});

但这必须为 JS 和 CSS 中的 sIFR 替换中的每个文本颜色进行编码。所以我想让 sIFR.useStyleCheck 设置只尊重 sifr-config.css 中的 CSS，例如：

body.blue-txt h3{ color: #009CDA; }
body.blue-txt h3 a{ color: #009CDA; }
body.blue-txt h3 a:hover{ color: #009CDA; text-decoration: underline; }

只有这似乎不起作用......链接文本不断弹出为 #0000FF 并且悬停没有下划线。这只是还不是功能，还是我做错了什么？

Answer 1

看来 v2.0 的这个分支正是您所需要的。

http://webdesign.maratz.com/lab/multi_color_sifr/

另一种可能性是 FLIR -图像替换

http://facelift.mawhorter.net/example-pages/改头换面/facelift-links.html

Answer 2

如果我可以建议，为什么不使用@font-face？目前大多数人已经升级到Firefox 3+，WebKit浏览器（Safari、Chrome等）也已经实现了一段时间，甚至IE5.5+也支持@font-face。这将解决您的 :hover 问题，并且更加语义和逻辑，并且速度更快，但更好的是没有 Flash！ ;)

但说实话，@font-face 将是最好的选择，除非您专门针对 << IE 5.5、Firefox 2-1 或更旧的 WebKit。很可能，您的自定义字体应该能够吸引超过 90% 的基于桌面浏览器的访问者。

Answer 3

useStyleCheck 对 Flash 影片中的颜色没有影响。您需要在 sIFR.replace() 参数中指定所有样式（字体大小除外）。

现在，您可以使用modifyCss< /a> 回调根据被替换元素的当前样式更新应用的 CSS。不过，您确实需要自己编程。