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?

Improve company productivity with a Business Account.Sign Up

x
 
COBOLdinosaurConnect With a Mentor Commented:
<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
What Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.

 
basicinstinctConnect With a Mentor Commented:
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.