CSS Links - Special Mouseover Effect

[Reilly]

I have a question for a CSS guru out there (or at least someone who knows more about CSS than me). :)

I have a link which is red, and has a bullet point which is white. When the user hovers over the link, I want to change the text to white, and the bullet point to red. I'm familiar with CSS hover, and classes/psudo-classes, but I can't figure out how to incorporate them so that in ONE anchor, 2 css link effects are applied simultaniously (changing the text to white, and the bullet point to red).

Any ideas? If not with CSS, is there some combination of javascript that can do this with an "onMouseover" or something of the like?

Thanks!

Reilly

[Marble]

javascript will work. Create 2 classes
.class1 {your:style;}
.class2{your:style;}

then in your a href tag:

onmouseover="this.style.class='class1'" onmouseout="this.style.class='class2'"

If I am correct on this. But you can use javascript. so it just switches which style to use.

[Reilly]

Great! That looks we're on to something here. But how would I define that within the anchor tag in the body?

<a class=..... href="..."> (bullet point that is white that turns to red) (text that is red and that turns to white)</a>

Within the actual anchor tag, how do I split up these 2 things (the bullet point and the text) with the different CSS classes so that they will simultaneously change? If I make them separate anchors, they will not change simultaneously.

Thanks!

Reilly

[infringer]

CSS2 can do what you are wanting

just do:

a {
Style info here
}

a:hover {
Style info here
}

Hope that helps!
-David

[Sardtok]

Or do this:

.text A { color: red; }
.bullet A { color. white; }
.text A:hover { color: white; }
.bullet A:hover { color. red; }

Think it should work, haven't tested it,
but I've used A:hover as a subclass of custom classes before and it has worked so this should too.

Edit:
Oh, hmm...
Maybe you have to do it the other way around:
text and bullet as subclasses of A,
but still the principal is the same... Sorry... ;)

A .text { color: red; }
A .bullet { color. white; }
A:hover .text { color: white; }
A:hover .bullet { color. red; }

You don't have to use custom classes instead of text and bullet you can insert div and whatever tag you use to create a bullet ;)

[Marble]

I think its:
a.bullet:hover {}

[Reilly]

Yes, it would be a.bullet:hover {}

I tried that...but am running into the syntax for the code in the body.

Here's my unworkable code for the body..but I'm showing you this so that you see my delima:

<a class="text" href="logos.htm"><span class="bullet">•</span> LOGO BRANDING</a>

So I have another idea dealing with Javascript, but I'm not sure if this would work...something like this:

(Syntax might not be correct, but if someone could let me know syntax wise how it should go, I'd appreciate it)

<a onmouseover(x="red"); onmouseout(x="white") class="text" href="logos.htm"> <span style="color: x">•</span> LOGO BRANDING</a>

It seems like it should work...but I'm not too good at javascript: Could somebody maybe just give me some hints on the proper syntax for the code?

Thanks for all who helped!

Reilly