What is the proper order of these selectors?
:LINK
:VISITED
:HOVER
:ACTIVE
:FOCUS
In addition, lets look at the following scenario:
- The links on my page need to load black.
- When the mouse hovers over them, change white.
- When the user clicks on them, change blue.
- On any page, the link corresponding to the currently loaded page should be red.
And whatever combination of the aforementioned scenario is required for multiple possibile statuses.
How would I go about doing that?
Thanx.love hate...
not sure where focus ties in there (of if its even valid <!-- m --><a class="postlink" href="http://www.w3schools.com/css/css_pseudo_classes.asp">http://www.w3schools.com/css/css_pseudo_classes.asp</a><!-- m -->)
EDIT:
just was looking at the css2 selectors (<!-- m --><a class="postlink" href="http://www.w3.org/TR/REC-CSS2/selector.html#dynamic-pseudo-classes">http://www.w3.org/TR/REC-CSS2/selector. ... do-classes</a><!-- m -->)
and found that focus is in fact valid, and it can be combined with any of the aforementionedBecause essentially :focus would be applied to one of the other four link states.For example...
Link 1
Link 2
Link 3
Link 4
Link 5
Here's what I'm shooting for...
Page Load - all links are blue, except Link 1 is red.
Mouse Over - links should turn green.
Mouse Click - links should turn yellow.
Current Page - link should be red.
And, of course, all the aforementioned "events" should work together, right?
I think that's it.
Thanx.<style type="text/css">
/*<![CDATA[*/
a:link, a:visited {
color: #00F;
}
a:hover {
color: #FF0;
}
a:active {
color: #0F0;
}
/*]]>*/
</style>
If you want the color of the link that's the current page to be red automatically, you'll have to do it with some sort of scripting. ALA has an article about doing this in PHP here (<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/keepingcurrent/">http://www.alistapart.com/articles/keepingcurrent/</a><!-- m -->).although, a link to the current page would be visited by default...Hmm...
Only the "hover" event seems to be working.
Any ideas?
Thanx.Anybody?
Thanx.Can it even be done?
Thanx.sure it can be done, don't have time to test but this should get you started, you can use the window.onload event to set the home page link to red.
function changeStyle(itemToChange) {
itemToChange.style.color = red;
}
<a href='http://www.webdeveloper.com/forum/archive/index.php/whatever' onmouseover="changeStyle(this)">Wood</a>
hope this helpsMy bad.
Forgot to mention...no javascript.
Only xhtml and css.
Thanx.Using JS for something that can be quite easily achieved with CSS seems... rather odd, to me.
Anyhoo, you might have some better luck checking out this link (<!-- m --><a class="postlink" href="http://www.w3schools.com/css/css_pseudo_classes.asp">http://www.w3schools.com/css/css_pseudo_classes.asp</a><!-- m -->).Okay...got the LoVeHAte thing working now.
Two more things...
Is there a way to have whatever the last link clicked on to stay a specific way. You know, I click on the link for page one and as long as I don't click another link, the page one link should remain "highlighted" or something to signify to the user which page they are currently viewing?
And...is there any way to "reset" the LoVeHAte status as far as the browser is concerned? You know, once the page has been visited, and the user leaves the page and returns, is there any way to "reset" that status so I can make the link show differently?
Thanx again!Originally posted by Paul Jr
Using JS for something that can be quite easily achieved with CSS seems... rather odd, to me.
Agreed, I chose a bad example (my js is synonym for :hover) however with js you can just as easily change the class name of an object to suite the unsupported :active pseudo for NN, that is if stmasi can reconsider the 'no js' notion.
forgot: I get the impression that the CSS community has a noticeable dislike of js. Personally I hate the language but felt compelled to learn it because of its wide spread acceptance. Am I reading things accurately?A good example of what I'm looking to accomplish can be viewed at...
<!-- m --><a class="postlink" href="http://www.alistapart.com/">http://www.alistapart.com/</a><!-- m -->
Look how the navigation bar is accomplished there, when a link is clicked on, it stays that color until you click on another.
Thanx.Correct me if I'm wrong... but it sounds like you're asking how to achieve the active (or hover) state of the link when it's actually not a link.
As you pointed out the nav at a List a Part, if you click on a link you go to that link's corresponding page. Once you're there, that link isn't a link anymore. Becomes just regular text. So are you asking how to make that regular text appear like one of the four states?
I hope I'm not confusing anybody...Hmm...
If it's just regular text, why are you able to click on it?
The whole thing is confusing, but I suppose that's what I want. I'm just looking for a CSS-based solution that will accomplish that.
Thanx.Yea... ignore my last post. I thought you were asking about the navigation on the right column.
We'll have to go into there stylesheet to figure out exactly what's going on...Yep.
I tried that, but it's a bit confusing to me as I'm just a CSS-beginner. Trying to look at that code and modify it to fit to my existing code is quite difficult for me.
Thanx.I think this the key right here in their stylesheet:
body#sectionone #menu li#one a,
body#sectiontwo #menu li#two a,
body#sectionthree #menu li#three a,
body#sectionfour #menu li#four a,
body#sectionfive #menu li#five a {
background: #c30;
border: 1px solid #c30;
color: #fff;
font-weight: bold;
}
If you view the source of the page you'll notice the id's in the body tag calling one of the "sections". This is how they're maintaining the links while giving them a different look.Okay.
Now, can you look at my css and tell me how to integrate that into my code?
Thanx.
<!-- m --><a class="postlink" href="http://www.geocities.com/stmasi/Anyone">http://www.geocities.com/stmasi/Anyone</a><!-- m -->?
Originally posted by stmasi
A good example of what I'm looking to accomplish can be viewed at...
<!-- m --><a class="postlink" href="http://www.alistapart.com/">http://www.alistapart.com/</a><!-- m -->
Look how the navigation bar is accomplished there, when a link is clicked on, it stays that color until you click on another.
Thanx.
They have a whole new style that they manually apply to the link that corresponds to the current page. There's no special CSS pseudo-element or anything.
:LINK
:VISITED
:HOVER
:ACTIVE
:FOCUS
In addition, lets look at the following scenario:
- The links on my page need to load black.
- When the mouse hovers over them, change white.
- When the user clicks on them, change blue.
- On any page, the link corresponding to the currently loaded page should be red.
And whatever combination of the aforementioned scenario is required for multiple possibile statuses.
How would I go about doing that?
Thanx.love hate...
not sure where focus ties in there (of if its even valid <!-- m --><a class="postlink" href="http://www.w3schools.com/css/css_pseudo_classes.asp">http://www.w3schools.com/css/css_pseudo_classes.asp</a><!-- m -->)
EDIT:
just was looking at the css2 selectors (<!-- m --><a class="postlink" href="http://www.w3.org/TR/REC-CSS2/selector.html#dynamic-pseudo-classes">http://www.w3.org/TR/REC-CSS2/selector. ... do-classes</a><!-- m -->)
and found that focus is in fact valid, and it can be combined with any of the aforementionedBecause essentially :focus would be applied to one of the other four link states.For example...
Link 1
Link 2
Link 3
Link 4
Link 5
Here's what I'm shooting for...
Page Load - all links are blue, except Link 1 is red.
Mouse Over - links should turn green.
Mouse Click - links should turn yellow.
Current Page - link should be red.
And, of course, all the aforementioned "events" should work together, right?
I think that's it.
Thanx.<style type="text/css">
/*<![CDATA[*/
a:link, a:visited {
color: #00F;
}
a:hover {
color: #FF0;
}
a:active {
color: #0F0;
}
/*]]>*/
</style>
If you want the color of the link that's the current page to be red automatically, you'll have to do it with some sort of scripting. ALA has an article about doing this in PHP here (<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/keepingcurrent/">http://www.alistapart.com/articles/keepingcurrent/</a><!-- m -->).although, a link to the current page would be visited by default...Hmm...
Only the "hover" event seems to be working.
Any ideas?
Thanx.Anybody?
Thanx.Can it even be done?
Thanx.sure it can be done, don't have time to test but this should get you started, you can use the window.onload event to set the home page link to red.
function changeStyle(itemToChange) {
itemToChange.style.color = red;
}
<a href='http://www.webdeveloper.com/forum/archive/index.php/whatever' onmouseover="changeStyle(this)">Wood</a>
hope this helpsMy bad.
Forgot to mention...no javascript.
Only xhtml and css.
Thanx.Using JS for something that can be quite easily achieved with CSS seems... rather odd, to me.
Anyhoo, you might have some better luck checking out this link (<!-- m --><a class="postlink" href="http://www.w3schools.com/css/css_pseudo_classes.asp">http://www.w3schools.com/css/css_pseudo_classes.asp</a><!-- m -->).Okay...got the LoVeHAte thing working now.
Two more things...
Is there a way to have whatever the last link clicked on to stay a specific way. You know, I click on the link for page one and as long as I don't click another link, the page one link should remain "highlighted" or something to signify to the user which page they are currently viewing?
And...is there any way to "reset" the LoVeHAte status as far as the browser is concerned? You know, once the page has been visited, and the user leaves the page and returns, is there any way to "reset" that status so I can make the link show differently?
Thanx again!Originally posted by Paul Jr
Using JS for something that can be quite easily achieved with CSS seems... rather odd, to me.
Agreed, I chose a bad example (my js is synonym for :hover) however with js you can just as easily change the class name of an object to suite the unsupported :active pseudo for NN, that is if stmasi can reconsider the 'no js' notion.
forgot: I get the impression that the CSS community has a noticeable dislike of js. Personally I hate the language but felt compelled to learn it because of its wide spread acceptance. Am I reading things accurately?A good example of what I'm looking to accomplish can be viewed at...
<!-- m --><a class="postlink" href="http://www.alistapart.com/">http://www.alistapart.com/</a><!-- m -->
Look how the navigation bar is accomplished there, when a link is clicked on, it stays that color until you click on another.
Thanx.Correct me if I'm wrong... but it sounds like you're asking how to achieve the active (or hover) state of the link when it's actually not a link.
As you pointed out the nav at a List a Part, if you click on a link you go to that link's corresponding page. Once you're there, that link isn't a link anymore. Becomes just regular text. So are you asking how to make that regular text appear like one of the four states?
I hope I'm not confusing anybody...Hmm...
If it's just regular text, why are you able to click on it?
The whole thing is confusing, but I suppose that's what I want. I'm just looking for a CSS-based solution that will accomplish that.
Thanx.Yea... ignore my last post. I thought you were asking about the navigation on the right column.
We'll have to go into there stylesheet to figure out exactly what's going on...
Yep.I tried that, but it's a bit confusing to me as I'm just a CSS-beginner. Trying to look at that code and modify it to fit to my existing code is quite difficult for me.
Thanx.I think this the key right here in their stylesheet:
body#sectionone #menu li#one a,
body#sectiontwo #menu li#two a,
body#sectionthree #menu li#three a,
body#sectionfour #menu li#four a,
body#sectionfive #menu li#five a {
background: #c30;
border: 1px solid #c30;
color: #fff;
font-weight: bold;
}
If you view the source of the page you'll notice the id's in the body tag calling one of the "sections". This is how they're maintaining the links while giving them a different look.Okay.
Now, can you look at my css and tell me how to integrate that into my code?
Thanx.
<!-- m --><a class="postlink" href="http://www.geocities.com/stmasi/Anyone">http://www.geocities.com/stmasi/Anyone</a><!-- m -->?
Originally posted by stmasi A good example of what I'm looking to accomplish can be viewed at...
<!-- m --><a class="postlink" href="http://www.alistapart.com/">http://www.alistapart.com/</a><!-- m -->
Look how the navigation bar is accomplished there, when a link is clicked on, it stays that color until you click on another.
Thanx.
They have a whole new style that they manually apply to the link that corresponds to the current page. There's no special CSS pseudo-element or anything.