Multiple Hover Effects in MX

2760 · Mar 5, 2003

Hi all,

Is there a way in MX that i can create multiple hover effects for different links?
i.e.) i've got two links on my webpage that i want in different colours and i want one of them to hover in blue (for example) and the other in red. Can this be done?

Thanks in Advance.

deecee · Mar 5, 2003

a.blue {color: black;}
a.blue:hover {color: blue;}
a.red {color: black;}
a.red:hover {color: red;}

<a href="blue.htm" class="blue">I am a blue hover link</a>
<a href="red.htm" class="red">I am a red hover link</a> [Hammer]
Nike Failed Slogans -- "Just Don't Do It!"

2760 · Mar 6, 2003

I'm new to MX, so i'm a little confused.
I've got two sets of links that are the same colour (white - #FFFFFF) but they're on two different coloured backgrounds; one set on skin colour background - #E6E6DC and the other on a grey background - #3399CC) now the white links on the grey are hovering yellow - which is what i want as its really visible - but the white links on the skin colour background aren't really visible - hence i want to change its colour and also want a different hover colour to yellow which, unlike the grey background, will not show up well on the skin coloured background. What i'm after is code which will enable me to operate two different active link colours and hover colours, and some assistance on where to insert it into the HTML code.

Thanks in Advance.

deecee · Mar 6, 2003

i could just tell you what to do but then that wouldnt help right

go to

http://www.w3schools.com

and go to their tutorial on CSS

the classes i gave you in my first reply are your classes to use. After you have your page set up with the classes defined is it still doesn't work then you can post your page code and I will be glad to help you.

A few tips

1) your classes go in between your head tags at the top of the page like the following
<style type="text/css">

</style>
2) a style of "A" is different from a style of "a"
3) keep them organized

From what I've told you you really dont need

http://www.w3schools.com

but it is helpful. [Hammer]
Nike Failed Slogans -- "Just Don't Do It!"

2760 · Mar 8, 2003

Hi,

I can't figure it out, so as you said you'd be happy to help, i've uploaded the page for you to have a look at the HTML/CSS;

http://www.routemasters-remembered.fsworld.co.uk/sample1.htm

...could you have a play around with the code and see if you can fix the problem. The white links in the top nav bar i want left as they are, but the links on the main page (which are clearly not very visible) i want the following done to them;

a:link {color:#0000FF ; text-decoration: none; }
a:active {color: #0000FF; text-decoration: none; }
a:visited {color: #6699FF; text-decoration: none; }
a:hover {color: #0066FF; text-decoration: none; }

; and as i've said, i want the links in the nav bar under the title to remain as they are. If you can assist, i'd be very grateful. Thanks.

deecee · Mar 8, 2003

this is what have

<html>
<head>
<style type="text/css">

</style>
<title>Welcome to Routemasters Remembered! - Home Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body bgcolor="#E6E6DC" text="#000000" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table width="98%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="44%" height="71"><img src="title1.gif" width="346" height="18"></td>
<td width="54%"> </td>
<td width="2%"><div align="right"><img src="title2.gif" width="90" height="67"></div></td>
</tr>
</table>
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#006699">
<tr>
<td height="19"> <strong><font color="#006699" size="1" face="Tahoma">..</font><font color="#FFFFFF" size="1" face="Tahoma"><a href="

http://www.routemasters-remembered.fsworld.co.uk/">HOME

PAGE</a> | <a href="

http://www.routemasters-remembered.fsworld.co.uk/menu1.htm">CLASS

HISTORIES (1970-1994)</a> | <a href="

http://www.routemasters-remembered.fsworld.co.uk/menu2.htm">RMs

IN FOCUS</a> | <a href="

http://www.routemasters-remembered.fsworld.co.uk/menu3.htm">EVENTS

& CELEBRATIONS</a> | <a href="

http://www.routemasters-remembered.fsworld.co.uk/menu4.htm">OTHER

PAGES</a></font></strong></td>
</tr>
</table>
<p align="center"><font size="2" face="Tahoma">Welcome to Routemasters Remembered!
This site is an illustrated history of London's Routemaster buses in service
in the City of London, the surrounding districts and the rest of the UK from
1970 up until the privatization of London Buses Ltd. in 1994.<strong><br>
<a href="

http://www.routemasters-remembered.fsworld.co.uk/about.htm">Find

out
more here</a></strong><a href="

http://www.routemasters-remembered.fsworld.co.uk/about.htm">

</a></font></p>
<p align="center"> </p>
<p align="center"><font size="2" face="Tahoma">Please sign the <a href="

http://pub2.bravenet.com/guestbook/show.php?usernum=139960955"><strong>Guestbook</strong></a>

before you go. Many thanks.</font></p>
<p align="center"> </p>
<p align="center"><font size="2" face="Tahoma">This website has been created with
<a href="

http://www.macromedia.com/software/dreamweaver/"><strong>Macromedia

http://www.macromedia.com/software/fireworks/"><strong>Macromedia

Fireworks MX</strong></a>©<br>
Best viewed on Internet Explorer 4.0+ at a resolution of 800x600</font></p>
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#006699">
<tr>
<td height="19"><div align="center"><strong><font color="#FFFFFF" size="2" face="Tahoma">Routemasters
Remembered © Alan Jones 2003</font></strong></div></td>
</tr>
</table>
</body>
</html>

i would suggest making subclasses ike such

a.nav:link {color:#FFFFFF ; text-decoration: none; }
a.nav:active {color: #FFFFFF; text-decoration: none; }
a.nav:visited {color: #FFCC33; text-decoration: none; }
a.nav:hover {color: #FFFF00; text-decoration: none; }
a.body:link {color: #0000FF ; text-decoration: none; }
a.body:active {color: #0000FF ; text-decoration: none; }
a.body:visited {color: #0066FF; text-decoration: none; }
a.body:hover {color: #0066FF; text-decoration: none; }

So your navbar lins would be like such

<a href="

http://www.routemasters-remembered.fsworld.co.uk/"

class="nav">HOME
PAGE</a>

and yourother links like so

<a href="

http://www.routemasters-remembered.fsworld.co.uk/about.htm"

class="body">Find out
more here</a>

you can have as many pseudo classes for an element like i showed you
[Hammer]
Nike Failed Slogans -- "Just Don't Do It!"

JillC · Mar 16, 2003

Hi 2760,

The site you need is

http://www.thepattysite.com/linkstyles3.cfm

This is a nice easy tutorial which will solve your problem. Also, I suggest

1 Use an external stylesheet
2 Set ALL your formatting in your stylesheet, not just the links
3 Set the body style links in the stylesheet for the body text, this does not get applied, it just IS.
4 Set your navbar style in the stylesheet and apply the navbar class to the <TR> tag which holds the navigation text. (it is only applied once, not to every occurrence of a link).

Once you start using CSS you'll wonder what took you so long to cotton on.

Good luck.
Jill.

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Multiple Hover Effects in MX

2760

Instructor

deecee

Technical User

2760

Instructor

deecee

Technical User

2760

Instructor

deecee

Technical User

JillC

Technical User

Similar threads

Part and Inventory Search

Sponsor