如何在同一页面上获得不同样式的链接并仍然让它们使用颜色框？

Question

我正在构建一个包含多个样式链接的网页，如下所示：

<a class="green" href="green.htm">Link is green and becomes blue on mouse over</a>

<a class="red" href="red.htm">Link is red and becomes yellow on mouse over</a>

然后我的 css 类是这样的：

a.green {   color: green; }
a.green:hover { color: blue; }


a.red {       color: red; }
a.red:hover { color: yellow; }

但是我希望 green.htm 和 red.htm 在 Colorbox 中打开......显然我不能再使用类了，因为我需要它们链接着色。

我怎样才能在同一页面上获得不同样式的链接，并且仍然让它们使用颜色框？

更新： 我已经求助于使用 onclick 事件来启动颜色框效果。

<a class="green" onclick="$.colorbox({innerWidth:500, innerHeight:300, href:'green.htm'});">Link is green and becomes blue on mouse over</a>

它不是很漂亮，但它会在有一天我得到一种我猜想的更清洁的做事方式之前。

Answer 1

试试：

<element class="red">
    all content of red.htm
</element>
<element class="green">
    all content of green.htm
</element>