css mouse over - Dev Shed

Dev Shed Forums Sponsor:

February 9th, 2001, 04:41 PM

Smitty

Junior Member

Join Date: Feb 2001

Location: Canada

Posts: 20

Time spent in forums: < 1 sec
Reputation Power: 0

Trying to make a text effect (mouseover, hover) with CSS - works just fine in IE but not with Netscape...any suggestions or hints.

Thanks

Smitty

February 9th, 2001, 09:02 PM

Universal Sea

Contributing User

Join Date: Jan 2001

Location: Canada / NZ / UK

Posts: 73

Time spent in forums: < 1 sec
Reputation Power: 8

you shouldnt be having problems with it unless you have a very old version of netscape...

i use something like:

A {
color: #ffffff;
text-decoration: none;
font-family: Arial, Tahoma, Helvetica, sans-serif;
font-size: 11px;
}
A:HOVER {
color: Teal;
text-decoration: underline;
font-family: Arial, Tahoma, Helvetica, sans-serif;
font-size: 11px;
}

__________________
Highest Leader of UM

February 9th, 2001, 11:26 PM

cdmcnett

Junior Member

Join Date: Feb 2001

Posts: 4

Time spent in forums: < 1 sec
Reputation Power: 0

Good Ol Netscape

Smitty ~

Unfortunately Netscape 4.x versions do not support the hover events like IE does until Netscape 6. If you wanna a rollover effect you may wanna try preloading some images and having an image swap function.

If you wanna continue playing with IE ... try these styles. You can take control over all link states. Just put the class inside the anchor tag.

.on {text-decoration:none; color:#ff0000;}
.on:active {text-decoration:none; color:#ff0000;}
.on:visited {text-decoration:none; color:#ff0000;}
.on:link {text-decoration:none; color:#ff0000;}
a.on:hover {text-decoration:none; color:#ff0000;}

Good Luck.
Chris

February 12th, 2001, 01:54 AM

adios

Senior Citizen

Join Date: Jan 2001

Location: leftcoast

Posts: 2,019

Time spent in forums: < 1 sec
Reputation Power: 10

Put the text you want to change in a <layer> tag (a <ilayer><layer>text</layer></ilayer> combo if you want relative (inflow) positioning. Onmouseover, do a document.write() to the layer, using the same string of text, in '<span class="overClass">text</span>' form, where 'overClass' styles the text as it was styled originally but with the desired changes. Onmouseout, the reverse. Don't forget to close() the document after wrting to it.

February 13th, 2001, 05:27 PM

Smitty

Junior Member

Join Date: Feb 2001

Location: Canada

Posts: 20

Time spent in forums: < 1 sec
Reputation Power: 0

Well, the <layer> tag got me closer, but still no cigar

I may have to resort to JavaScript to do what I want, I'm just trying to avoid using many images to save download time...

Thanks
Smitty

February 14th, 2001, 01:21 AM

adios

Senior Citizen

Join Date: Jan 2001

Location: leftcoast

Posts: 2,019

Time spent in forums: < 1 sec
Reputation Power: 10

<html>
<head><title>untitled</title>
<style type="text/css">
.out{font-family:"Comic Sans MS";font-size:16px;color:gold;padding-left:1px;}
.over{font-family:"Comic Sans MS";font-size:22px;color:red;padding-left:1px;}
.hover{font-family:"Comic Sans MS";font-size:16px;color:red;text-decoration:underline;}
.hoverOff{font-family:"Comic Sans MS";font-size:16px;color:purple;text-decoration:underline;}
.clk{font-family:"Comic Sans MS";font-size:22px;color:green;}
td{font-family:"Comic Sans MS";font-size:16px;color:gold;}
a{text-decoration:none;color:green;}
</style>
<script language="Javascript">
var overContent1 = '<span class="over"><strong> alter a section of it</strong></span>';
var outContent1 = '<span class="out"> alter a section of it</span>';
var overContent2 = '<span class="over"> DESTROY NETSCAPE 4 !</span>';
var overContent3 = '<a class="hover" href="#" onmouseout="lyrOverOut(inner2,outContent3,0)" ';
overContent3+= 'onclick="alert(sExpl)">links</a>';
var outContent3 = '<a class="hoverOff" href="#" ';
outContent3+= 'onmouseover="lyrOverOut(inner2,overContent3,0)">links</a>';
var sExpl = "The trick to hover effects is to remember that when you document.write() to ";
sExpl+= "the Layer, you're rewriting the WHOLE document (everything inside the <layer> tags,";
sExpl+=" and that includes the <a>nchors themselves) - and any event handlers assigned; ";
sExpl+="you can, however, omit the new mouseover handler if it was a mouseover that ";
sExpl+="called the .write() in the first place since the content will be changed again ";
sExpl+="before a new mouseover can fire (by a mouseout event). Got that? ";
sExpl+="Same with rewriting the _outs on an _out function call.\nOtherwise, ";
sExpl+="include the entire HTML string that created the Layer's document.\n\n";
sExpl+="Anything DIFFERENT in the new string will represent the effect.\n<div> and <span> ";
sExpl+="created Layers, which further blur() the distinction between the Layer object and ";
sExpl+="its .document object, are also buggier. Really.\n\nBy tracking state, you can return ";
sExpl+="any link to a 'visited' color instead of to the original.\n\nAnd - Link objects do ";
sExpl+="support CSS (barely)\n\n\nadios.";
function lyrOverOut(lyr,content,move) {
lyr.top += move;
lyr.document.write(content);
lyr.document.close();
lyr.parentLayer.clip.width = lyr.clip.width = lyr.document.width;
lyr.parentLayer.clip.height = lyr.clip.height = lyr.document.height;
}
function clickMe() {
document.clickIt.visibility=(document.clickIt.visibility=='hide')?'show':'hide';
}
window.onload = function(){window.inner1 = document.outer1.document.inner1;
window.inner2 = document.outer2.document.inner2;
document.clickIt.left=20;
document.clickIt.top=window.innerHeight-100;
document.clickIt.document.write('<span class="clk">Click It</span>')
document.clickIt.document.close();
inner1.visibility='show'}
</script>
</head>
<body bgcolor="salmon">
<br><br><hr><br><br>
<table align="center" cellspacing=0 cellpadding=0 border=0>
<tr>
<td width=450 colspan=2 align="right">
Let's say you have some text on a page, and that you'd like to
</td>
<td align="left" valign="middle">
<ilayer id="outer1"><layer id="inner1" visibility="hide"> alter a section of it_</layer></ilayer>
</td>
<td width=150>_
</td>
</tr>
<tr>
<td colspan=4 align="left" valign="middle">
every time you run your little_<a href="#" onmouseover="clickMe();lyrOverOut(inner1,overContent1,-5)"
onmouseout="clickMe();lyrOverOut(inner1,outContent1,5);"
onclick="alert('The .write() function:\n'+lyrOverOut+'\n\nThe '+
'content:\n'+overContent1)">mouseover</a> a link or another item on the page. It's more problemmatic <br>in Navigator 4 than those 'other browsers' - but not impossible! Use <span
style="font-family:Courier;color:black"><table></span>s with nested <span
style="font-family:Courier;color:black"><ilayer><layer></layer></ilayer></span>s for positioning. Ugh!
</td>
</tr>
<tr>
<td width="10%" valign="bottom"><br>
Change <ilayer id="outer2"><layer id="inner2"><a class="hoverOff" href="#"
onmouseover="lyrOverOut(inner2,overContent3,0)">links</a></layer></ilayer>
</td>
<td valign="bottom"> too...
</td>
</tr>
</table>
<br><br><hr><br><br>
<div align="right">
<table border=0>
<tr><td>___[another item on the page]</td></tr>
<tr align="center"><td><ilayer><layer bgcolor="green" onmouseover="this.bgColor='red'" onmouseout="this.bgColor='green'">
<a href="#" onmouseover="clickMe();lyrOverOut(inner1,overContent2,-5)"
onmouseout="clickMe();lyrOverOut(inner1,outContent1,5)"
onclick="alert('The .write() function:\n'+lyrOverOut+'\n\nThe content:\n'+overContent2)">
<span class="out"> ‡</span></a>
</layer></ilayer></td></tr>
</table>
</div>
<layer id="clickIt" visibility="hide"></layer>
</body>
</html>

[Edited by adios on 02-28-2001 at 11:14 PM]

Last edited by adios : September 21st, 2002 at 09:59 PM.

February 16th, 2001, 10:58 AM

jaylard

Junior Member

Join Date: Feb 2001

Posts: 6

Time spent in forums: < 1 sec
Reputation Power: 0

Preferred order of pseudo classes on the A element

When you are applying pseudo-classes (such as :hover) to an element, remember that the order in which you list them in your style sheet is important. In CSS, properties applied to an element later in your style sheet take precedence over properties applied earlier. So, if you place the :hover pseudo-class, for instance, before the :visited pseudo-class, none of your visited links will display the :hover properties. The preferred order for placing pseudo-classes on the "A" element is:

a:link
a:visited
a:hover
a:active

The :active pseudo-class, which displays when the A element is either clicked or selected by the keyboard, should follow :hover because otherwise the :active properties would never display when the A element is clicked (although they would if activated by the keyboard).

Viewing: Dev Shed Forums > Web Design > CSS Help > css mouse over

« Previous Thread | Next Thread »

Thread Tools	Search this Thread
Email this Page	Search this Thread: Advanced Search
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread:

Posting Rules
You may not post new threads You may not post replies You may not post attachments You may not edit your posts vB code is On Smilies are On [IMG] code is On HTML code is Off

View Your Warnings | New Posts | Latest News | Latest Threads | Shoutbox

Forum Jump

Free IT White Papers!

Accelerating Trading Partner Performance
One in five. That's how many partner transactions have at least one error. That is an amazing statistic, particularly given the extraordinary leaps in innovation across the global supply chain during the past two decades. Download this white paper to learn more.

Competing on Analytics
This Tech Analysis is designed to help identify characteristics shared by analytics competitors, and includes information about 32 organizations that have made a commitment to quantitative, fact-based analysis.

Cost Effective Scaling with Virtualization and Coyote Point Systems
An overview of the industry trend toward virtualization, how server consolidation has increased the importance of application uptime and the steps being taken to integrate load balancing technology with virtualized servers.

Five Checkpoints to Implementing IP Telephony
Implementation planning for IP PBX software and IP telephony has become vital as businesses replace discontinued legacy PBX phone systems. This informative whitepaper outlines five "checkpoints" for any implementation plan that will help make IP communications a successful proposition.

Hosted Email Security: Staying Ahead of New Threats
In the last two years, email has become a fierce battleground between the nefarious forces of spam and malware, and the heroes of messaging protection. The spam volumes increased alarmingly every month, bringing clever new forms of phishing and virus propagation attacks.

More Free IT White Papers!