Solved

CSS: Button expands right on mouseover

Posted on 2012-04-06
8
394 Views
Last Modified: 2012-04-10
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.
0
Comment
Question by:a204801
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
  • 2
  • +1
8 Comments
 
LVL 20

Expert Comment

by:Proculopsis
ID: 37818357
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
 
LVL 23

Expert Comment

by:basicinstinct
ID: 37818786
personally i would just use the html abbr element...

http://www.w3schools.com/tags/tag_abbr.asp
0
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 250 total points
ID: 37819605
<button onmouseover="this.innerHTML='Super Silly';" onmouseout="this.innerHTML='SS';"> SS</button>


Cd&
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 23

Assisted Solution

by:basicinstinct
basicinstinct earned 250 total points
ID: 37820080
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
 

Author Comment

by:a204801
ID: 37824303
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
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 37829100
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
 

Author Comment

by:a204801
ID: 37829393
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
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 37829467
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

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
CSS auto-height of empty div 3 63
Changing the format from a text box to a drop-down menu 9 34
Make icons act like add/minus for qtys 6 38
Drag & Drop Error 5 24
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

738 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question