Text Over?

  • Thread starter Thread starter Guest
  • Start date Start date
Text changing sizes onMouseOver is pretty annoying, but you can get this
with CSS and its pseudo-classes. Just do something like making the
style/format for a:link in one size and the style/format for a:hover in a
different size. Be aware that without further qualification, this will
affect all links on your page.
 
Try something like this.

In the <head> section, put the following:

<style>
..normsize {font-size: 85%;}
..bigsize {font-size: 150%;}
</style>

In the <body> section, put the following:

<p>Hi,</p>
<p>
<span class="normsize" onmouseover="this.className='bigsize'"
onmouseout="this.className='normsize'">Mouseover me and see me get
big</span></p>
<p>'Bye</p>

I used percentages for the font sizes, but you can use whatever you like.
You can also put the style delarations on a style sheet. And don't forget
the capital N in "this.className"

Hope this helps.

Wally S
 
Here's a better way (a much better way) -

<style>
..special a {font-size: 85%;cursor:default;}
..special a:hover {font-size: 150%;}
</style>

In the <body> section, put the following:

<p>Hi,</p>
<p class="special"><a href="javascript:;">Mouseover me and see me get
big</a></p>
<p>'Bye</p>
 
And here is a simpler version.

In the <head> section:

<style>
..bigsize {font-size: 150%;}
</style>

In the <body> section:

<p>Hi,</p>
<p>
<span onmouseover="this.className='bigsize'"
onmouseout="this.className=''">Mouseover me and see me get big</span></p>
<p>'Bye</p>

The '" is a ' followed by a " and the ''" is a ' directly followed by a '
followed by a "

Wally S
 
Nice.

Wally S

Murray said:
Here's a better way (a much better way) -

<style>
.special a {font-size: 85%;cursor:default;}
.special a:hover {font-size: 150%;}
</style>

In the <body> section, put the following:

<p>Hi,</p>
<p class="special"><a href="javascript:;">Mouseover me and see me get
big</a></p>
<p>'Bye</p>
Click to expand...
 
But if you happen to click on the text while you are mousing over it (as a
reader may do), you get a little frame of dots around the text. Any way
around that?

Wally S
 
That only happens in IE/Mac, I believe. It's an accessability thing, but
there is a way to banish it. I just ignore it personally. If only IE
supported the hover pseudo-class on things besides <a> tags, you could do
this -

..special:hover { ... }

and then this -

<p class="special">check it out</p>

But Noooo.....
 
Back
Top