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?
 
COBOLdinosaurCommented:
<button onmouseover="this.innerHTML='Super Silly';" onmouseout="this.innerHTML='SS';"> SS</button>


Cd&
0
 
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
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.