Text Over?

  • Thread starter Thread starter Guest
  • Start date Start date
G

Guest

How can I get to to change size with cursor moved over it, instead of using
buttons etc
 
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.....
 
You must log in or register to reply here.

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Oversensitive touchpad on modern laptops 0
text over image 2
How to change cursor. 10
Super imposing text on multiple predefined areas on a graphic 13
METRO 2039 Revealed 0
text display on rollover 6
Access Textbox - Hide Cursor 0
How do I create a button drop down menu? 6

Back
Top