473,320 Members | 2,029 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 software developers and data experts.

Keeping Hover Colors for the Current Page

Dan
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
Jul 20 '05 #1
8 6572
dj******@yahoo.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 <st***@pugh.net> <http://steve.pugh.net/>
Jul 20 '05 #2
In article <5f**************************@posting.google.com >,
dj******@yahoo.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
kr*******@xs4all.netherlands (nl)
"We called him Tortoise because he taught us" said the Mock Turtle.
Jul 20 '05 #3
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> 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.


Well, there should not be a link on the "Events" page that points back
to itself. Remove such links. On any page, there will be one item in
the menu that is not a link.

<div id="adminmenu">
Events<br>
<a class="mainlink mainlink2" href="">Home Page Teaser</a><br>
<!-- etc. -->
</div>

Style div#adminmenu to the a:hover color/background, for example:

body {color black; background-color: white}
a:hover, #adminmenu { color:white; background-color: blue }

When a user hovers her/his pointer over the Events link, it will
change colors to white on blue. On the events page, the text will be
black on white, except (1) the "Events" menu item, which will be white
on blue; and (2) menu links when the user hovers over them.

BTW, that menu is not a div with line breaks, it is a list of links.
Consider instead

<ul id="adminmenu">
<li><a class="mainlink mainlink1" href="">Events</a></li>
<li><a class="mainlink mainlink2" href="">Home Page Teaser</a></li>
<li><a class="mainlink mainlink3" href="">Testimonials</a></li>
<li><a class="mainlink mainlink4" href="">Repertoire</a></li>
<li><a class="mainlink mainlink5" href="">Customers</a></li>
<li><a class="mainlink mainlink6" href="">Surveys</a></li>
</ul>

Then use style sheets to fine-tune the presentation.

--
Brian
follow the directions in my address to email me

Jul 20 '05 #4
In post <5f**************************@posting.google.com >
Dan said...
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.


just change the colors around:
http://usenet.alt-html.org/menu/page1.html

--
brucie.
15/October/2003 08:24:31 am
Jul 20 '05 #5
Kris wrote:
In article <5f**************************@posting.google.com >,
dj******@yahoo.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

Jul 20 '05 #6
Nikolaos Giannopoulos wrote:

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>
...
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.

<ul id="adminmenu">
<li>events</li>
<li><a href="foo.html">testimonials</a></li>
....
</ul>
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 don't see the problem. It *is* text.
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.
- I imagine I could try to specify the cursor to use in
these cases


I'm not sure if it's ever a good idea to change the cursor. That
seems a little too close to the chrome, and outside the scope of www
authoring. 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. Otherwise, the cursor should
be left along.

--
Brian
follow the directions in my address to email me

Jul 20 '05 #7
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

Jul 20 '05 #8
Nikolaos Giannopoulos wrote:
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.
Also available is the help cursor, and various cursors used to
indicate that a window can be resized or moved.
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
At the risk of getting really nit-picky: an arrow cursor that can
highlight the non-link text (of the current page) is non-standard.
Otherwise, the cursor should be left along.


Grrr. (Bad left hand! Bad bad bad left hand!!)
Along what ;-)


Along the site of the road? :-D (yes, the typo was intentional)

--
Brian
follow the directions in my address to email me

Jul 20 '05 #9

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

5
by: Thomas Mlynarczyk | last post by:
Hello, I want to style an <a> element to have a special padding on "hover", like a {padding: 3px 5px 2px 4px;} a:hover {padding: 2px 4px 3px 5px;} No problem for Mozilla. Opera 7, however,...
8
by: JLahm | last post by:
I have defined a class for my images called .image that specifies the default border color, width and style. I'd like to be able to have the pseudo elements link, visited and active have one color...
11
by: Piers Lawson | last post by:
Hi Thank you to everyone who contributed to my last post (for those that noticed... I've now removed the XHTML ;-) In the page listed below, a two part horizontal menu is displayed, indented...
5
by: Ben Sharvy | last post by:
I know I could do it by restricting hover to a class of links (a:hover.actuallyalink) but is there a way that doesn't require me to change every link in every existing html document?
4
by: news.internode.on.net | last post by:
Is there any way that a STYLE attribute can be used to control the color of hyperlinks. We have a tabular output generator written in C#. Each column of the table is defined by a column, and...
5
by: Bubba | last post by:
I need to use an inline css tag for a few links that will not behave like the a:link and a:hover attributes in my stylesheet. I want to add a special link color with underline and a mouseover...
7
by: Cate Archer | last post by:
I want to have a border around an image that changes color when the mouse hovers over it. The following code works perfectly in FireFox but not in Internet Exploiter. The text link changes color...
4
by: yawnmoth | last post by:
Say I wanted to make a link change colors when someone was hovering over it. Ordinarily, I could do that by doing something like... <style> a { color: whatever; } a:hover { color:whatever;
1
by: darkzone | last post by:
Hi I saw this layout and wanted to try some thing similar, but I am unable to change the position of the vertical menu with out changing the position of the hole document and I don't really have a...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
0
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.