hover text not working 4

[jockm]

Good day

I am still trying to get hover text to work on this password protected link:

<SPAN ID=&quot;bluegreen&quot;>
<a href=&quot;javascript:gateKeeper()&quot; onMouseover=&quot;window.status='Remember your password is required!'; return true; &quot; onMouseOut=&quot;window.status=''; return true;&quot;><B><FONT COLOR=&quot;#00FF00&quot;>(Facilitators
only)</FONT></B></a>
</SPAN>

(I have tried replacing those <SPAN>s with <DIV>s, doesnt make any difference. )

The password gateKeeper function (in an external .js file) looks like this:

function gateKeeper()
{
var password = prompt(&quot;Enter password or request it.&quot;, &quot;Request_password&quot


if (password == null)
{
// return false;
}
else
{

window.close(self)
var loc=password + &quot;.html&quot;;
top.main.location.replace(loc);
}
}

The ID=&quot;bluegreen&quot; in an external styles.css file looks like this:

#bluegreen a:link, #bluegreen a:visited, #bluegreen a:active {color:#00FF00;text-decoration: none;}
#bluegreen a:hover {color:#FFFF33; background:#FF00FF;}

You'll notice that in the link code <FONT Color=&quot;#00FF00> duplicates what the bluegreen ID calls for. The reason is that the ID does not turn the link bluegreen. Nor does it make the hover work. But to make it even more quirky, in Opera 5 (only), the background *does* change to #FF00FF on the mouse hover.

Go figure.

Anyway, if anyone can figure out how I can get the text to actually change color to #FFFF33 on hover I would be delighted to know how.

thanks!

P.S. All this stuff and the source can be viewed at

http://www.kalikalos.org.

The external files are

http://www.kalikalos.org/scripts.js

and

http://www.kalikalos.org/styles.css

 

[rac2]

One would think that the <a> within the <span> would inherit the style properties of the <span>. But what about the <b> and the <font>? Would they override the <span>?

a:hover and the others are specific to an <a>, maybe putting the style ID inside the <a> would work.

And have you tried making bluegreen a class instead of an ID?

 

[GUJUm0deL]

jockm, the correct syntax is: #bluegreen a:hover {color:#FFFF33; background-color:#FF00FF;}
Here's a great website that has sytaxes for CSS:

http://html.tucows.com/designer/csstutpropvalue.html

I have not failed; I have merely found 100,000 different ways of not succeding...

 

[jockm]

I thank both the above two replies, because they both were integral to the solution of my problem.

I repaired the background:color, and then I took out the <font> and <b> tags and put ID=&quot;bluegreen&quot; in with the <a> tag.

It worked as it should!

Then I wondered what would happen if I removed the <span ID=&quot;bluegreen&quot;>. Was it necessary as well?

Yes. It turns out it needs to be there as well as inside the <a> tag. Dunno why.

Anyway, I will go and follow up on GUJUm0deL's suggestion to check the tucows link for css syntax tips.

Many thanks!

 

[rac2]

Thanks for the star, but my post was hardly worth that. Double stars for GUJUmOdel for the valuable CSS reference site.

 

[xutopia]

I second the star for guju!

Merry Christmas everyone! Gary

http://www.xutopia.com

Haran

 

[GUJUm0deL]

Wow...u guys are so genorous...
Thanks, and to ya all...MERRY XMAS!!




------- [santa2] I have not failed; I have merely found 100,000 different ways of not succeding...

 

[Tarwn]

The reason the bluegreen span was necessary is because that is what your referncing in your style:

#bluegreen a:hover {color:#FFFF33; background-color:#FF00FF;}

If you were to change this to:

.bluegreen:hover {color:#FFFF33; background-color:#FF00FF;}

(as well as other similar references to the span that encapsulates your anchors)

and change the anchor tags like so:

<a href=&quot;wherever.html&quot; class=&quot;bluegreen&quot;>your link</a>

or if you wanted all your links on the page to follow this style, you could simply remove the spans and define your CSS classes without the #bluegreen in front of them.

-Tarwn
Experts are only people who have realized how much they will never know about a language.
________________________________________________________________________________
Want to get great answers to your Tek-Tips questions? Have a look at faq333-2924

 

[jockm]

I took GUJUmOdel's suggestion and went to the CSS syntax page he recommended. That in turn referred me to a CSS tutorial. On the 4th lesson about classes they show the following code to illustrate how you can get three different colors of text using Classes:

<head>
<style type=&quot;text/css&quot;>
<!--
P.green { color: green; font-family: arial, helevecta; font-size: 12pt; font-weight: bold};
P.blue { color: blue; font-family: arial, helevecta; font-size: 10pt; font-weight: bold};
.green { color: lime; font-family: times new roman, times; font-size: 14pt }
-->
</style>
<title>Example 3</title>
</head>
<body bgcolor=&quot;black&quot;>
<p class=&quot;green&quot;>This is in the &quot;green&quot; paragraph class.</p>
<p class=&quot;blue&quot;>This is in the &quot;blue&quot; paragraph class.</p>
<blockquote class=&quot;green&quot;>This is a blockquote in the &quot;green&quot; class, but since it's not a paragraph, it doesn't appear in the same green class that text in paragraph tags would.</blockquote>

Now this is meant to be a very basic simple example. I happened to try it first in MS Explorer 5.1 for the Mac, which I think is the most up to date version. To my surprise, only the first paragraph appeared!

Just to be sure there wasnt something awry with the code, I fired up Opera 5.0, and tried it there--no problem, worked perfectly, I can see all 3 flavours of text.

What this example seems to show me is that even very simple and &quot;basic&quot; CSS declarations still arent working consistently across the most modern browsers.

Ah well. I can stop kicking myself a bit, thinking I must be writing things wrong.