1

我正在寻找正确的语法来完成这项工作。事情很简单，根据网页的颜色主题为链接（链接、悬停、访问和活动）选择不同的颜色。

让我们来看看：

CSS

.DarkTheme a
{
    color: #66cccc;
}

.DarkTheme a:visited
{
    color: #66FF99;
}

.DarkTheme a:hover
{
    color: #AAFFCC;
}

.DarkTheme a:active
{
    color: #FFFFFF;
}

JQUERY（我也在使用 JqueryColor，因为我正在使用颜色转换，但这只是为了澄清这个问题不是问题）：

正确的语法怎么会！！？

function ChangeLinkColors()
{
    $("a.DarkTheme:link").animate({"color":"#00FF0F"}, 2000);
    $("a.DarkTheme:visited").animate({"color":"#0F00FF"}, 2000);
    $("a.DarkTheme:hover").animate({"color":"#F0FF0F"}, 2000);
    $("a.DarkTheme:active").animate({"color":"#00FFFF"}, 2000);
}

这不起作用。

function ChangeLinkColors()
{
    $(".DarkTheme a:link").animate({"color":"#00FF0F"}, 2000);
    $(".DarkTheme a:visited").animate({"color":"#0F00FF"}, 2000);
    $(".DarkTheme a:hover").animate({"color":"#F0FF0F"}, 2000);
    $(".DarkTheme a:active").animate({"color":"#00FFFF"}, 2000);
}

这不起作用！

从上面看这两个相同，但在“颜色”一词上没有引号，两者都不起作用。

function ChangeLinkColors()
{
    $("a:link", $(".DarkTheme")).animate({"color":"#0000FF"}, 2000);
    $("a:visited", $(".DarkTheme")).animate({"color":"#0F00FF"}, 2000);
    $("a:hover", $(".DarkTheme")).animate({"color":"#F0FF0F"}, 2000);
    $("a:active", $(".DarkTheme")).animate({"color":"#00FFFF"}, 2000);
}

这是“我不会工作”方法的另一种方式......带或不带引号 con color 参数......

这里是 Jquery 动画的文档：

其中一些方法“看起来”有效，但不是，只是完全改变颜色（、link或之间没有区别）。visitedhoveractive

任何人都知道正确的方法是什么？

我没主意了。

4

3 回答 3

0

是的，玛丽安，但请意识到我之前所说的，颜色从一个到另一个的变化并不正确，例如：

链接：红色悬停：青色访问：蓝色

如果访问的链接（蓝色），当您将鼠标悬停时，它不会从蓝色变为青色，而是突然变为红色，然后平滑变为青色，反之亦然，当鼠标离开时（从青色平滑变为红色突然又蓝了）。这是不正确的。

只需在 Fiddle 中尝试一下您自己的示例，获取主题，使用我指定的颜色（很容易看到从蓝色到红色的残酷变化，而不是平滑的蓝色到青色，并在 1 秒处保留过渡，看看它没有问题。）

无论如何，谢谢你在这里，帮助我，我非常感谢。

于 2013-12-22T21:31:39.423 回答
0

您不需要 JQuery 来完成此任务。您可以使用CSS3 过渡。

尝试这个：

a {
    color: #fff;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

a:hover {
    color: #ff000;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

.dark a {
    color: #ff0000;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

.dark a:hover {
    color: #000;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

http://jsfiddle.net/8yQ6D/3/

于 2013-12-20T07:25:38.180 回答
0

为了根据配色方案更改处于不同状态（已访问、活动）的链接的颜色，首先确保您的 CSS 文件中已准备好配色方案，并且每个方案都依赖于一个单独的类。

有了这些，您的主题选择器只需要更改容器元素类（可能是主体）。

这是 CSS 中的主题的样子：

/*THEME 1*/
.theme_1 a{
    text-decoration: none;
    background-color: orange;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
.theme_1 a:active{
    border: 1px dashed blue;
}
.theme_1 a:visited{
    color: green;
}
.theme_1 a:hover{
    background-color: red;
}

仅使用 jQuery 来更改容器。 JSFIDDLE 示例

编辑：为什么 CSS 动画优于 jQuery 动画？

答：我通常不会在宗教上只喜欢一种解决方案。但是在这种情况下，由于 CSS 动画的易变性:hover，:active尤其是当您谈论动态颜色主题转换时，CSS 动画是可行的方法。您也不能选择visitedJavaScript 中的链接

于 2013-12-20T07:51:51.167 回答