I'm looking for the correct syntax for make this work. The thing is so simple as select different colors for links (link, hover, visited and active) depending of the color theme of the webpage.
Let's see:
CSS
.DarkTheme a
{
color: #66cccc;
}
.DarkTheme a:visited
{
color: #66FF99;
}
.DarkTheme a:hover
{
color: #AAFFCC;
}
.DarkTheme a:active
{
color: #FFFFFF;
}
JQUERY (I'm using JqueryColor too, cause I'm using color transitions, but this is only for clarify this issue isn't a problem):
How would be correct syntax!!?
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);
}
This doesn't works.
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);
}
This doesn't works!.
The same in this two from above, but without quotes on "color" word, neither works.
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);
}
This is another way of "I'm not gonna work" method... with, or without quotes con color parameter...
Here the documentation of Jquery animation:
Some of this ways to do it "appears" to work, but not, only change the color completely (no difference between link
, visited
, hover
or active
).
Anyone know how is the correct way?
I'm out of ideas.
In order to change the color of the links in different states (visited, active) based on the color scheme, first make sure that you have the color schemes ready in your CSS files and that each scheme depends on a separate class.
With these in place, your theme selector just needs to change a container element class (might be body).
Here's what a theme in CSS could look like:
Use jQuery only to change the container. JSFIDDLE example
Edit: Why CSS animate over jQuery animations?
A: I usually don't religiously prefer only one solution. But in this case, CSS animations are the way to go due to the volatile nature of the
:hover
and:active
especially when you're talking about dynamic color theme transitions. Also you can not select thevisited
links in JavaScript