Cascading Style Sheets

[rkolinsky]

I am new to CSS...
Is it possible to have 2 hover types on a page? On each page I would like to have the links turn to "bold" as the mouse hovers over that text (Verdana), and would like the other links to turn "red" as the mouse hovers over that text
Thanks!!

 

[Jack Brewster]

The short answer is, yes, you can do this. But because you want some links
to act one way, and some another, you'll have to work with classes which
adds some complexity (not a lot, just more than the basic a:hover for
everything).

Here's a tutorial to look at. You'll obviously have to modify it to suit
your design:
http://www.echoecho.com/csslinks.htm

Scroll down about 2/3 of the way. Look for the title "MULTIPLE LINKSTYLES
ON SAME PAGE"

Good luck!

--
Jack Brewster - Microsoft FrontPage MVP

I am new to CSS....
Is it possible to have 2 hover types on a page? On each page I would like

to have the links turn to "bold" as the mouse hovers over that text
(Verdana), and would like the other links to turn "red" as the mouse hovers
over that text.

 

[Wally S]

Something like this:
a.boldlink:hover{font-weight: bold; }
a.redlink:hover {color: Red;}

I named the classes "boldlink" and "redlink" but you can name them whatever
you want. Then on each link, go to the hyperlink properties dialog box,
click 'style,' and assign the appropriate class.

I am new to CSS....
Is it possible to have 2 hover types on a page? On each page I would like

to have the links turn to "bold" as the mouse hovers over that text
(Verdana), and would like the other links to turn "red" as the mouse hovers
over that text.

 

[Steve Easton]

Yes.
Create a class for one of the styles, you
can call it anything. Example:
..class2
then build the effects you want into this class
and then assign the class to the elements you want
to have the .class2 style by either:
Placing them in a table and assigning a the class name to
the table element:
< table class="class2".....>
Note the leading period is not needed when assigning
the class name to the table, but is needed to define the class.

It can also be done by swapping the "class" using inline mouseover / mousout
events.

If you would like some "very basic" examples
of both methods you can look here:
http://www.95isalive.com/test/hoverbutton.htm
feel free to view source, there are comments
explaining everything.
It's something I put together as an experiment and forgot to take
down. It is by "No" means meant to be anything more than
"extremely basic" info.

--
using 2k PRO but....95isalive
This site is best viewed............
........................with a computer

I am new to CSS....
Is it possible to have 2 hover types on a page? On each page I would like

to have the links turn to "bold" as the mouse hovers over that text
(Verdana), and would like the other links to turn "red" as the mouse hovers
over that text.

 

[Jim Buyens]

-----Original Message-----

I am new to CSS....
Is it possible to have 2 hover types on a page? On each
page I would like to have the links turn to "bold" as
the mouse hovers over that text (Verdana), and would
like the other links to turn "red" as the mouse hovers
over that text.

Yes, for example:

a.menulink { padding:2px; font-weight:bold; color:
#CC0000; background-color: #FFFFFF; text-decoration:none; }

a:hover.menulink { color: #ffffff; background-color:
#cc0000; text-decoration:none; }

would only apply to hyperlinks that you coded with a class
of menulink, as in:

<a class="menulink" href="whatever.htm">Whatever</a>

Jim Buyens
Microsoft FrontPage MVP
http://www.interlacken.com
Author of:
*----------------------------------------------------
|\---------------------------------------------------
|| Microsoft Office FrontPage 2003 Inside Out
||---------------------------------------------------
|| Web Database Development Step by Step .NET Edition
|| Microsoft FrontPage Version 2002 Inside Out
|| Faster Smarter Beginning Programming
|| (All from Microsoft Press)
|/---------------------------------------------------
*----------------------------------------------------