CSS: Button expands right on mouseover

I would like to do this via CSS, JS combo.

I have a small button that will have the acronym for what it is.  I want to be able to, onmouseover, expand that to say the full word(s).

For example, pretend these are text links with different colored backgrounds, each two letters being a different link:

SS VC FG

When you mouseover 'SS' it expands to say 'super silly' or 'VC' expands to 'very cool'.  You get my drift.

Thanks.
a204801Asked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

ProculopsisCommented:
Take a look at this jsfiddle.

$("button").hover( hover );

function hover() {
    var legend = $(this).text();
    $(this).text( $(this).attr( "alt" ) );
    $(this).attr( { alt: legend } );
}

Open in new window


you can add:

$(this).toggleClass( "hover" );

Open in new window


and css to change the appearance:

.hover { color: red; }

Open in new window

0
basicinstinctCommented:
personally i would just use the html abbr element...

http://www.w3schools.com/tags/tag_abbr.asp
0
COBOLdinosaurCommented:
<button onmouseover="this.innerHTML='Super Silly';" onmouseout="this.innerHTML='SS';"> SS</button>


Cd&
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

basicinstinctCommented:
while coboldinosaur's example looks nice and simple it is a huge WCAG fail and i suggest not using it unless you do not need to care about accessibility.

Using this code would mean you have to be a mouse user and a sighted user to benefit from it.

code like this makes the web bad. sorry coboldinosaur.

http://www.w3.org/TR/WCAG/
0
a204801Author Commented:
I went with a combo solution, my stuff and the onmouseover stuff above:
<ul>
    <li style="background-color:#7d87d2; color:#ffffff;"><a href="/" title="Super Silly" alt="Super Silly" class="bhq-ex" onmouseover="this.innerHTML='Super Silly';" onmouseout="this.innerHTML='SS';">SS</a></li>
    <li style="background-color:#7d87d2; color:#ffffff;"><a href="/" title="Very Silly" alt="Very Silly" class="bhq-ex" onmouseover="this.innerHTML='Very Silly';" onmouseout="this.innerHTML='VS';">VS</a></li>
  </ul>

Thanks all.
0
COBOLdinosaurCommented:
sorry coboldinosaur.

Never apologize for telling the truth.

You were quite correct in your assessment of the code, and the request.  The result is that we have a better solution, because you pointed out the accessibility issue.  Unfortunately, mouseover and hover will continue to be used without the additional text support because most developers do not understand accessibility issues.

Cd&
0
a204801Author Commented:
I might add that my final code was as follows:

    <li class="abbrev-green"><a href="#" class="abbrev-white" title="SuperSilly" alt="SuperSilly"   onmouseover="this.innerHTML='SuperSilly';" onMouseOut="this.innerHTML='SS';">SS</a></li>

Hopefully that will help with accessibility issues.
0
COBOLdinosaurCommented:
Yeah It does, I should have included a title in the code I posted.  Sometimes we get in too much of a hurry, and just supply the easy part.

Cd&
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.