1

これを機能させるための正しい構文を探しています。Webページのカラーテーマに応じて、リンク（リンク、ホバー、訪問済み、アクティブ）に異なる色を選択するだけです。

どれどれ：

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

これは機能しません。

上記の2つでも同じですが、「色」という言葉を引用しないと、どちらも機能しません。

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

これは、「私はうまくいかない」方法の別の方法です...引用符の有無にかかわらず...

Jqueryアニメーションのドキュメントは次のとおりです。

この方法のいくつかは機能しているように見えますが、色を完全に変更するだけです ( link、visited、hoverまたはの間に違いはありませんactive)。

正しい方法を知っている人はいますか？

私はアイデアがありません。

4

3 に答える 3

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 に答える