PDA

Click to See Complete Forum and Search --> : have hover state not apply to all links on page

Pierre Rouillet
09-16-2003, 01:23 PM
hello folks

I've got this beautiful definition right here:

a:link {
display:block;
height:19px;
width:116px;
text-decoration:none;
font-weight:normal;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size:9px;
color:#000000;
vertical-align:middle;
margin-left:0px;
margin-top:0px;
background-color:#FF44FF;
border-top: 1px dotted #000000;
padding-left:4px;
padding-top:3px;
}
a:hover {
display:block;
height:19px;
width:116px;
text-decoration:none;
font-weight:normal;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size:9px;
color:#FFFFFF;
vertical-align:middle;
margin-left:0px;
margin-top:0px;
background-color:#000000;
border-top: 1px dotted #000000;
padding-left:4px;
padding-top:3px;
}

Now, I want this to extend not to all links on the page that follows, but only to certain ones. Is there a way to define hover states in a way that applies to certain definable cases only, while excluding others?
I've tried redefining another tag that isn't the <a> tag, but it wouldn't work (it's being ignored); maybe there's a way to write a condition, like 'if it is both within a div who's id is 'menu' and an <a> tag, then do this and this' ? Or some other way to define a hover state that doesn't apply to all links on the entire page?

(if anyone wants to see what I'm working on: http://www.steffiweismann.de/index_final7.html)

thanks in advance

P
pyro
09-16-2003, 02:15 PM
You'll have to give the other links a class, and then give them new css definitions. Take a look at this thread: http://forums.webdeveloper.com/showthread.php?s=&threadid=7326
Pierre Rouillet
09-17-2003, 01:24 PM
thanks for the link; obviously I haven't used the right search words.
Well. Unforunately, this doesn't seem to be working at all. The browser simply ignores it (tested in MSIE and Mozilla on MacOSX). Please see: http://www.steffiweismann.de/ind_MSIE01.html (and look at the code in the mid frame); the css file itself can be found at: http://www.steffiweismann.de/lager/aktuell/ie_01/cIE.css .)
pyro
09-17-2003, 02:47 PM
Don't have time to look through your code right now, but take a look at this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a.altlink {
color: red;
background-color: transparent;
text-decoration: none;
}
a.altlink:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<p><a href="http://www.w3c.org">W3C</a> | <a href="http://www.w3c.org" class="altlink">W3C</a></p>
</body>
</html>
Pierre Rouillet
09-19-2003, 06:50 AM
This way it works. Thank you very much, this is very helpful.

I wish I understood the logic behind it, whose understanding makes you able to come up with such a thing. Anyway, I think this very useful trick should be included in any future tutorial.

For anyone interested in the use of these scripts in real world, I'll upload files and post links later this afternoon.
pyro
09-19-2003, 08:36 AM
I'll see if I can explain the logic behind it to you...

In our CSS, we first define the properties for all the links on our page, with this part:

a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}This will apply to all links on the page (or site, if the css is used in an external .css file, as it should be). Next, we define a new set of links, that belong to the altlink class.

a.altlink {
color: red;
background-color: transparent;
text-decoration: none;
}
a.altlink:hover {
text-decoration: underline;
}Basically, what a.altlink means is that it should look for all <a> tags with the class of altlink: <a href="http://www.w3c.org" class="altlink">W3C</a>

For both of the above sectoins of code, the :hover (http://www.w3.org/TR/REC-CSS2/selector.html#dynamic-pseudo-classes) pseudo-class is the class that will be used when the users cursor is over the link.
Pierre Rouillet
09-19-2003, 11:33 AM
Hey Pyro

thanks for taking your time to explain.

Yes; I thought so. I know of the a {... and the a:hover {... - syntax, and of I understand the way classes function. I didn't know that this would be the way to combine them, and I don't now the syntax enought to invent such beautiful solutions myself. The a and a:hover are called 'contextual selectors', right?
But for now, I think I understand this specific script. And I guess I should just buy some extensieve compendium.

thanks again, see you

P
pyro
09-19-2003, 11:45 AM
Actually, the W3C calls :hover a "pseudo-class". Contextual selectors is something more like this:

<style type="text/css">
div p {
color: #f60;
}
</style>Which would mean that each paragraph tag inside a div tag would have the color #f60 (dark orange), but regular paragraph tags (tags not inside division tags) would have regular coloring.