Keeping Hover Colors for the Current Page

When a user clicks on a link in my menu, I want the background color
of the link that comes up in the hover to remain on the destination
page.

My menu looks like this:
<div id="adminmenu">
<a class="mainlink mainlink1" href="">Events</a><br>
<a class="mainlink mainlink2" href="">Home Page Teaser</a><br>
<a class="mainlink mainlink3" href="">Testimonials</a><br>
<a class="mainlink mainlink4" href="">Repertoire</a><br>
<a class="mainlink mainlink5" href="">Customers</a><br>
<a class="mainlink mainlink6" href="">Surveys</a><br>
</div>

My styles look like this:
..mainlink {
width: 100%;
padding: 12px;
font-family : Arial, Helvetica;
font-size: 9pt;
font-weight: bold;
color: #336699;
text-decoration: none;
}
..mainlink1:hover {
background-color: #949EA7;
color: #FFFFFF;
}
..mainlink2:hover {
background-color: #659EA5;
color: #FFFFFF;
}

etc...

So if, for example, if I click on a link named Events, when I arrive
at that page, I want the "Events" item in the menu to remain in its
"hover" configuration even though I'm no longer hovering.

I understand how to do this using table cells, but since I'm trying to
strictly use CSS on this project, I'm not quite sure how to access the
style properties of the A tag.

Thanks for your help,
Dan

djsavlon (AT) yahoo (DOT) com (Dan) wrote:

When a user clicks on a link in my menu, I want the background color
of the link that comes up in the hover to remain on the destination
page.

My menu looks like this:
div id="adminmenu"
a class="mainlink mainlink1" href="">Events</a><br
a class="mainlink mainlink2" href="">Home Page Teaser</a><br
a class="mainlink mainlink3" href="">Testimonials</a><br
a class="mainlink mainlink4" href="">Repertoire</a><br
a class="mainlink mainlink5" href="">Customers</a><br
a class="mainlink mainlink6" href="">Surveys</a><br
/div

My styles look like this:
.mainlink {
width: 100%;
padding: 12px;
font-family : Arial, Helvetica;
font-size: 9pt;
font-weight: bold;
color: #336699;
text-decoration: none;
}
.mainlink1:hover {
background-color: #949EA7;
color: #FFFFFF;
}
.mainlink2:hover {
background-color: #659EA5;
color: #FFFFFF;
}

etc...

So if, for example, if I click on a link named Events, when I arrive
at that page, I want the "Events" item in the menu to remain in its
"hover" configuration even though I'm no longer hovering.

Why is there a link to the Events page from the Events page? Pages
should never link to themselves.

Remove the <a> tags from the Events link and replace them with
something else (<span> if you can't think of anything meaningful) then
apply the background style to that element.

But the above looks like a list, so why not use list markup?

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <steve (AT) pugh (DOT) net> <http://steve.pugh.net/>

In article <5ff4b9bc.0310140649.1d3d8951 (AT) posting (DOT) google.com>,
djsavlon (AT) yahoo (DOT) com (Dan) wrote:

When a user clicks on a link in my menu, I want the background color
of the link that comes up in the hover to remain on the destination
page.

[html and css snipped]

<div id="adminmenu">
<a class="current" href="">Events</a><br>
<a href="">Home Page Teaser</a><br>
<a href="">Testimonials</a><br>
....

#adminmenu a:hover, #adminmenu .current {
/* styles for hover state _and_ current link */
}

--
Kris
kristiaan (AT) xs4all (DOT) netherlands (nl)
"We called him Tortoise because he taught us" said the Mock Turtle.

Kris wrote:

In article <5ff4b9bc.0310140649.1d3d8951 (AT) posting (DOT) google.com>,
djsavlon (AT) yahoo (DOT) com (Dan) wrote:

When a user clicks on a link in my menu, I want the background color
of the link that comes up in the hover to remain on the destination
page.

[html and css snipped]

div id="adminmenu"
a class="current" href="">Events</a><br
a href="">Home Page Teaser</a><br
a href="">Testimonials</a><br
...

#adminmenu a:hover, #adminmenu .current {
/* styles for hover state _and_ current link */
}

One small detail though as this seems to be the most common suggestion I
have seen; The current selection should not be and hyperlink if we want
to follow the - "no page links should link back to the page itself".

Thus, using the above example we need only change the HTML to something
like (BTW as an aside I also switched the <br>'s to <p>'s):

<div id="adminmenu">
<p class="current">Events</p>
<p><a href="">Home Page Teaser</a></p>
<p><a href="">Testimonials</a></p>
....

My question:

Does this make more sense or should something other than <p> be used? I
ask because the only thing I don't like about using a <p> is that the
user gets an insertion point cursor when hovering over the text.

I would rather have the default cursor as this is supposed to represent
the current link - I imagine I could try to specify the cursor to use in
these cases but I'm not sure if I am just going down the wrong road i.e.
if there is a better alternative.

Any suggestions?

--Nikolaos

Brian wrote:

Nikolaos Giannopoulos wrote:

This is not 3 paragraphs. Remember that css is optional, so start with
sensible markup. I'd say it's a list of menu options.

Agreed.

ul id="adminmenu"
li>events</li
li><a href="foo.html">testimonials</a></li
...
/ul

I would rather have the default cursor as this is supposed to
represent the current link

No, it is not supposed to represent any link at all. If the cursor
changed to a pointer, that would confuse a visitor. It is supposed to
indicate that that menu item is the current selection. That seems like
a job for color, background, font, etc., but not the cursor.

Yes, of course color, background, font, etc... should be used to
indicate the current selection (in fact the example suggested that).

To be clear, on Mozilla 1.3 Win NT, I see at least 3 different kinds of
cursors - (1) a hand with a pointing finger used for links, (2) a text
insertion marker used when hovering over text and (3) an arrow as what I
am assume to be the default.

When marked up as above the cursor in insertion pointer (2) will be used
when hovering over the events. My thinking was that maybe it makes more
sense for it to be the arrow as in (3) *NOT* the hand pointer in (1) above.

I just see the current selection as some sort of inactive link and
although I am not suggesting that it should have a finger pointer cursor
it seems kind of odd that on the current page the cursor is text
insertion - as opposed to the arrow - and when on another page the
cursor instead shows the user the hand pointer.

Finally, if each the menu items was an image the cursor would behave as
I would have liked it to above (but I am in no way going down that road...).

I could maybe see using a "help" cursor to call the
visitor's attention to the fact that additional information is available
for an element (e.g., there is a title attribute set). I've gone back
and forth on this on my sites.

Actually, I do use the help cursor for things like abbreviations and
find it to be quite useful as per (that is my opinion of course):

http://www.realworldstyle.com/css_help.html

Otherwise, the cursor should be left along.

Along what ;-) In general I agree and I guess I am just being picky.

--Nikolaos