javascript - sIFR3 : controlling a and a:hover styles inside replaced through CSS rather than JS

Question

为了在我的网站上对 sIFR 功能进行优雅的降级和最少的编码，我希望尽可能多地在 CSS 中定义样式。这是我的做法:

• 定义一个 H3 标签以被 sIFR3 替换。

• H3 根据其容器的不同采用不同的 CSS 颜色，例如:

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

• H3 可能 包含一个 anchor (我知道语义问题，但目前就是这样......抱歉)

设置:

sIFR.useStyleCheck = true;

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

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，并且悬停没有下划线。这只是 Not A Feature (Yet)，还是我做错了什么？

Answer 1

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

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

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

http://facelift.mawhorter.net/example-pages/facelift/facelift-links.html