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!

Register Log in
  • Congratulations SkipVought on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

2 x A:hover on a page

Status
Not open for further replies.
SM777

SM777

Technical User
Mar 7, 2001
208
0
0
GB
Hi,

I'd like to have 2 different a:hovers in a page. For the first half of page I want all links to hover in green, on the second half of the page hover in blue.

I know how to create the hover, just not how to have 2 different hover settings on the same page.

Is it possible?
 
Sort by date Sort by votes
In your style sheet:

a.first:hoover
a.second:hoover

In your page:

<A class=&quot;first&quot; href=&quot;............

<A class=&quot;second&quot; href=&quot;............


Erik
 
Upvote 0 Downvote
You would have to assign classes eg :

<style type=&quot;text/CSS&quot;>
.class1 {
color: Blue;
}
.class2 {
color: Green;
}
.off {
color: Black;
}
</style>


For you blue link :

<a href=&quot;link.html&quot; class=&quot;off&quot; onMouseOver=&quot;this.className='class1';&quot; onMouseOut=&quot;this.className='off';&quot;>link</a>


For your green link :

<a href=&quot;link.html&quot; class=&quot;off&quot; onMouseOver=&quot;this.className='class2';&quot; onMouseOut=&quot;this.className='off';&quot;>link</a> Regards

Big Dave

davidbyng@hotmail.com


** If I am wrong I am sorry, but i'm only trying to help!! **

 
Upvote 0 Downvote
I sae this one time: Cuold anyone tell me if it's right.

a:hover.link1 {
color: Blue;
}
a:hover.link2 {
color: Blue;
}
 
Upvote 0 Downvote
It is, but I think you are 'supposed' to have the pseudo class last - a.link2:hover - and you can apply as many as you like - including visited etc, though order does matter.

You can also combine them [css2].
[bb]
 
Upvote 0 Downvote
An example for you guys to play with...

<head>
<title>Hyperlink Styles</title>

<style>
body {font-family: Arial; font-size: 10pt}

a{font-family:arial; font-size: 10pt; color: black; text-decoration: none;}
a:hover {color:#C0C0C0; font-size: 10pt; text-decoration: underline;}

a:hover.1 {color: blue; font-size: 10pt; text-decoration: underline;}
a:hover.2 {color: red; text-decoration: none;}
a:hover.3 {color: green; font-weight: bold; text-decoration: none;}
</style>

</head>

<body>

<p><a href=&quot;#&quot;>Normal link</a></p>

<p><a href=&quot;#&quot; class=&quot;1&quot;>This link will change to blue</a> - with underline</p>

<p><a href=&quot;#&quot; class=&quot;2&quot;>This link will change to red</a> - no underline</p>

<p><a href=&quot;#&quot; class=&quot;3&quot;>This link will change to green</a> - no underline, bold </p>
</body>
</html>

Hope this helps <!-- :eek:) -->
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

lmcate
  • Locked
  • Question
From HTML Page open an MDB files on the server and work
Replies
0
Views
63
lmcate
lmcate
cae154
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
212
spamjim
spamjim
Alt255
  • Locked
  • Question
Searching for a string that contains brackets
Replies
0
Views
69
Alt255
Alt255
lmcate
  • Locked
  • Question
Create a Expand/Collapse FAQ Accordion, Collapse other on Click 1
Replies
2
Views
176
Mike Lewis
Mike Lewis
Mackeinath
  • Locked
  • Question
Xml file import
Replies
0
Views
127
Mackeinath
Mackeinath

Part and Inventory Search

Sponsor

Back
Top