Solved

CSS: Button expands right on mouseover

Posted on 2012-04-06
8
375 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
  • 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
 
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
Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

 

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

What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

760 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

Need Help in Real-Time?

Connect with top rated Experts

26 Experts available now in Live!

Get 1:1 Help Now