JavaScript - Javascript Knocks Out Css:hover

HI,

I am looking to enlarge an image when its hovered over, can anyone give me the code for this?

Thanks

Hi guys,

I am having an issue changing a piece of Javascript and hoped you guru's could help?I am not awful with Javascript but it is fair to say I am still at the beginning of my learning! I can't find the correct answer in forums and tutorials and you guys are literally my last hope! Here it is ....

I have a drop-down menu on a website I am working on which is made up of HTML, CSS and a little bit of Javascript. At the moment it is set so that when the user hovers over the menu it operates the drop-down. This obviously does not work for iPads etc as there is no mouse to hover. I want to keep my menu but alter the Javascript so the menu drops when clicked instead.

Here is my code:

Javascript

Code:

<script type="text/javascript"><!--//--><![CDATA[//><!--
startList = function() {
	if (document.all&&document.getElementById) {
		navRoot = document.getElementById("nav");
		for (i=0; i<navRoot.childNodes.length; i++) {
			node = navRoot.childNodes[i];
			if (node.nodeName=="LI") {
				node.onmouseover=function() {
					this.className+=" over";
				}
				node.onmouseout=function() {
					this.className=this.className.replace(" over", "");
				}
			}
		}
	}
}
window.onload=startList;

//--><!]]></script>

HTML

Code:

<div id="menuPadding">
	<div id="menu">
<ul id="nav">
<li id="m1"><a href="">HOME</a></li>
<li id="m2">ABOUT US 					       
<ul>
<li><a href="">Our Values</a></li>
<li><a href="">Facilities</a></li>
<li><a href="">Arena</a></li>
<li><a href="">Jobs</a></li>
</ul>
</li>
<li id="m3">SUCCESS 					       
<ul>
<li><a href="">Jobs</a></li>
<li><a href="">Results</a></li>
<li><a href="">Awards</a></li>
<li><a href="">Testimonials</a></li>
</ul>
</li>
</div>
</div>

CSS

Code:

#menu {
	margin-top: 16px;
	width: 879px;
	height: 30px;
	z-index: 1000;
	font-family: Verdana, Geneva, sans-serif;
	font-size:11px;
	font-weight:bold;
}

#menuPadding {
	margin: 0px 0px 0px 0px;
	padding: 10px 0px 10px 0px;
	text-align:center;
	z-index: 1000;
}

#menuPadding ul {
	height: 29px;
	margin: 0px 0px 0px 0px;
	padding: 5px 0px 5px 0px;
z-index: 1000;
}

#menuPadding ul li {
/*	display: inline;*/
	line-height: 29px;
	padding:0px;
	margin-left:1px;
	display:block;
	float:left;
	font-weight:bold;
	color:#fff;
z-index: 1000;
}

#menuPadding ul li a {
	text-align:center;
z-index: 1000;
}

#menuPadding ul li li {
	padding:0px;
	margin:0px;
z-index: 1000;
}

#menuPadding ul li li a {
	text-align:left;
	padding-left:14px;
	text-transform:uppercase;
z-index: 1000;
	font-size:90%;
}

#menuPadding ul li li a.notupper {
	text-transform:none;
z-index: 1000;
}

/* coloured menus */
#menuPadding ul li#m1 {
	background:#FF0000;
	width:96px;
z-index: 1000;
}

#menuPadding ul li#m1 li {
	background:#FF0000;
	width:146px;
z-index: 1000;
}

#menuPadding ul li#m2 {
	background:#0099CC;
	width:96px;
z-index: 1000;
}

#menuPadding ul li#m2 li {
	background:#0099CC;
	width:166px;
z-index: 1000;
}

#menuPadding ul li#m2 li a {
	width:166px;
z-index: 1000;
}

#menuPadding ul li#m3 {
	background:#999999;
	width:97px;
z-index: 1000;
}

#menuPadding ul li#m3 li {
	background:#999999;
	width:176px;
z-index: 1000;
}

#menuPadding ul li#m3 li a {
	width:176px;
z-index: 1000;
}

#menuPadding ul li#m4 {
	background:#9966CC;
	width:96px;
z-index: 1000;
}

#menuPadding ul li#m4 li {
	background:#9966CC;
	width:156px;
z-index: 1000;
}

#menuPadding ul li#m4 li a {
	width:156px;
z-index: 1000;
}

#menuPadding ul li#m5 {
	background:#AAC619;
	width:96px;
z-index: 1000;
}

#menuPadding ul li#m5 li {
	background:#AAC619;
	width:230px;
	padding-right:20px;
z-index: 1000;
}

#menuPadding ul li#m5 li a {
	width:230px;
z-index: 1000;
}

#menuPadding ul li#m6 {
	background:#FF9900;
	width:97px;
z-index: 1000;
}

#menuPadding ul li#m6 li {
	background:#FF9900;
	width:146px;
z-index: 1000;
}

#menuPadding ul li#m7 {
	background:#FF0099;
	width:97px;
z-index: 1000;
}

#menuPadding ul li#m7 li {
	background:#FF0099;
	width:216px;
	color:#fff;
z-index: 1000;
}

#menuPadding ul li#m7 li a {
	width:216px;
	color:#fff;
z-index: 1000;
}

#menuPadding ul li#m7 li li {
	font-size:87%;
z-index: 1000;
}

#menu li ul ul { /* third-and-above-level lists */
	margin: -30px 0 0 216px;
z-index: 1000;
}

#menu li:hover ul ul, #menu li.sfhover ul ul {
	left: -999em;
z-index: 1000;
}

#menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul { /* lists nested under hovered list items */
	left: auto;
z-index: 1000;
}

#menuPadding ul li#m8 {
	background:#660099;
	width:97px;
z-index: 1000;
}

#menuPadding ul li#m8 li {
	background:#660099;
	width:146px;
z-index: 1000;
}

#menuPadding ul li#m9 {
	background:#A80017;
	width:97px;
z-index: 1000;
}

#menuPadding ul li#m9 li {
	background:#A80017;
	width:146px;
z-index: 1000;
}

#menuPadding ul li a:link,#menuPadding ul li a:active,#menuPadding ul li a:visited {
	color:#fff;
z-index: 1000;
}

#menuPadding ul li a:hover {
	color:#000;
z-index: 1000;
}

/* suckerfish */
#menu, #menu ul { /* all lists */
	padding: 0;
	margin: 0;
	list-style: none;
	line-height: 1;color:#fff;
}

#menu a {
	display: block;
	width: 96px;
}

#menu li { /* all list items */
	float: left;
	width: 96px; /* width needed or else Opera goes nuts */
	border-top:1px solid #fff;
}

#menu li ul { /* second-level lists */
	position: absolute;
	background: orange;
	width: 106px;
	left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
	font-size:90%;
}

#menu li ul ul { /* third-and-above-level lists */
/*	margin: -1em 0 0 96px;*/
	font-size:110%;	
}

#menu li li { 
	font-size:100%;
	color:#fff;
}


#menu li:hover ul ul, #menu li.sfhover ul ul {
	left: -999em;
}

#menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul { /* lists nested under hovered list items */
	left: auto;
}

I realise that this must be quite an easy thing for you guys but - as I said - I am at the beginning of my learning and it is confusing the hell out of me! All of the things I have tried have not worked! Any help would be truly appreciated!

Thanks in advance!

Hi everyone,

Im new to the whole website thing as a whole but my mate got me onto joomla which has been great and iv got a site up im almost happy with and have learnt quite alot about coding etc.

My problem is:
Im utilising a vertical menu, just simple text as links, i want to add an effect on hover and clicking on that makes the text slide elegantly to the right about 16pixels.
I have another unpublished template that iv bought (that doesnt quite work at all, module position all messed up etc) but it does this hover effect perfectly on the menu.

So i have the .js file from that template and iv read some tutorials on how to add a js file to my template but its just not doing anything.

Is it a good idea to try to add this file from a different template to my template or is there a easier way to do this (what i think is a) simple effect.

Thanks.

ps i can post the js code if wanted

Quick question,

I need to get the hover effect that Templatemonster has, for example click here and hover over a template image see how you get that larger pop-up image that disappears instantly after you remove you mouse from the template thumbnail image.

How would I get that effect?

Thanks!!!

Rather than post everything here, I'll give a link to my stackoverflow post, which didn't receive a good answer.

Note: I have a different function that uses toggleClass on these same elements

One person suggested using CSS. That worked very well, until I went to toggle my elements the second time (remove the added class). Then, the new "transition" line in my CSS caused the jQuery transition to perform very quickly.

html - Using jquery .hover, with $this - Stack Overflow


How can I get hover to work? Or better, use css transition, which I prefer - without ruining my jQuery toggleclass' animate time?

Thanks.

Instead of loading the data when the page loads (thus making the page load slower) I wanna make it load when you hover over the tool tip so how would I change this?

PHP Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Test Screenname</title>

<style type="text/css">
body {color:#000;background-color:#FFF; font-family:Arial, Helvetica, sans-serif;}


/*tooltip*/

div.tooltip {
    width: 200px;
    color: #fff;
    text-align: center;
}

div.tooltip h4 {
    color: #fff;
    font-weight: bold;
    text-shadow: 2px 2px 1px #222;
    margin: 0;
    padding: 13px 10px 5px;
    background: url(img/balloon.png) top left no-repeat !important;
    background: url(img/balloon.gif) top left no-repeat;
    font-size: 11px;
}

div.tooltip p {
    margin: 0;
    padding: 0 10px 15px;
    text-shadow: 2px 2px 1px #222;
    background: url(img/balloon.png) bottom left no-repeat !important;
    background: url(img/balloon.gif) bottom left no-repeat;
    font-size: 10px;
}

</style>
<script type="text/javascript" src="mootools.js"></script>

<script type="text/javascript">


  window.onload=function()
  {
    
    
    /* setup tooltips */
    var as = [];

    $S('a').each(function(a){
        if (a.getAttribute('title')) as.push(a);
    });
    
    new Tips(as, {maxOpacity: 0.9, maxTitleChars: 25});

  }

  </script>
</head>
<body>
  <a href="#" title="
<?php

    $url = "http://www.blockstatus.com/aim/status-checker/index.php";
    $ch = curl_init();
    curl_setopt($ch, CURLOPT_URL,$url);
    curl_setopt($ch, CURLOPT_POST, 1);
    curl_setopt($ch, CURLOPT_POSTFIELDS,"aimac=screenname");
    curl_setopt ($ch, CURLOPT_RETURNTRANSFER, 1);
    curl_setopt($ch, CURLOPT_USERAGENT, $_SERVER['HTTP_USER_AGENT']); 
    $result2 = curl_exec ($ch);
    curl_close ($ch);
    $data = $result2;
    $pattern = '/Status:<\/b>(.*?)<br.*?><\/td>/i';
    preg_match($pattern, $data, $status);
    $output = str_replace("Status: ", "", $status[1]);
    $aimstatus = trim($output);
    echo "$aimstatus";

?>

">Test tooltip</a>

</body>
</html>

I have a quick search box in my home page that I can't seem to get working properly. When the user types in the input field and hits the "Add" button, the word they typed in appears in a box below the "Add" button. I got that, no problem. The issue arises because I want the user to be able to hover over any of the words they typed in, see some visual change (like text color changing), and be able to click the word to delete it.
Right now, when the user hits the "Add" button, a function is called and the word is stored to an array. Then I have a for() loop to display the contents of the array, but the for() is only displaying one word on the screen and it is the most recent word that was added. How can I make this right?

HTML Form:
Code:

<form>
			<table>
				<th>Recipe Quick Search</th>
				<tr>
					<td class="quickSearchHeader">Ingredient:</td>
				</tr>
				<tr>
					<td><input type="text" name="quicksearch" size="18" id="quickSearchInput"/></td>
				</tr>
				<tr>
					<td class="quickSearchAddButton" name="quickSearchAddButton" id="quickSearchAddButton"><input type="image" src="images/quickAddButton.png" name="quicksearchadd" alt="Add" onclick="insert(this.form.quicksearch.value);show();this.form.quicksearch.value='';return false;"/></td>
				</tr>
				<tr>
					<td class="quickSearchIngList" id="quickSearchIngList" valign="top"></td>
				</tr>
				<tr>
					<td class="QSSubmit"><input type="submit" name="quickSearchSubmit" value="Search!"></td>
				</tr>
			</table>
			</form>

Javascript Code:
Code:

<script type="text/javascript">

 var array = new Array();

  function insert(val)
  {
	if(val != "")
	{
		array.push(val);
	}
  }

  function show()
  {
  if(array.length > 0)
	{
		for(i = 0; i < array.length; i++)
		{
		document.getElementById('quickSearchIngList').innerHTML = "<p id='quickList'>" + array[i] + "</p>";
		}
	}

  }

</script>

I have two divs, one is the triggering and the other is the hidden one. Hovering the first div will show the hidden div. To hide the div the user must "mouseout" from this div, however if the user "mouseout" from the first div nothing will happend and that is the problem because if there are another group next to them, and the user pass from one triggering div to the next this will show the two hidden divs stacking over one another.

This is for a horizontal menu (something like www.oracle.com).

The actual code is this:

Code:

<div id="option_a"><p>FIRST OPTION</p>
    <div id="option_a_menu">
         **HERE ARE LIST, DIVS, IMGS**
    </div>
</div>
<div id="option_b"><p>SECOND OPTION</p>
    <div id="option_b_menu">
         **HERE ARE LIST, DIVS, IMGS**
    </div>
</div>

The JS:

Code:

function init() {
   oOptionA=document.getElementById("option_a");
   oOptionAmenu=document.getElementById("option_a_menu");
   oOptionB=document.getElementById("option_b");
   oOptionBmenu=document.getElementById("option_b_menu");
   //behaviors
   addEvent(oOptionA,'mouseover',goOptionA);
   addEvent(oOptionAmenu,'mouseout',outOptionAmenu);
   addEvent(oOptionB,'mouseover',goOptionB);
   addEvent(oOptionBmenu,'mouseout',outOptionBmenu);
}

function goOptionA() {
   oOptionAmenu.style.visibility="visible";
}
function outOptionAmenu() {
   oOptionAmenu.style.visibility="hidden";
}
function goOptionB() {
   oOptionBmenu.style.visibility="visible";
}
function outOptionBmenu() {
   oOptionBmenu.style.visibility="hidden";
}

The user will hide the option A menu only when his mouse clears the div that showed up. However is he hover the triggering div and go just to the next triggering div (The second div) will trigger the visibility of their menu, but the previously menu will still on stage, stacking the two menus.

I was trying this to solve the problem:

Code:

...addEvent(oOptionA,'mouseout',goOptionA);

function goOptionA() {
   if (oOptionAmenu!=hover) {
     oOptionAmenu.style.visibility="hidden";
  } else {
    oOptionAmenu.style.visibility="visible";
}
}

However, this is not working, something is wrong with the "oOptionAmenu!=hover" but how can I do this ?

Thanks in advanced

Hi all

I have a list of items that when you hover over them it displays an image (using CSS). This is fine when the list is small but when the list is large it takes a while to load all the images... this then delays any javascript on the page from running until all the images are loaded.

Is there a way to either:

* Use javascript to make it so the image only loads when the link is hovered over?

or

* Allow the rest of the javascript on the page to run before the images are finished loading?

I think i'd prefer the first solution if possible but i'm open to all ideas.

Thanks in advance!

Hi everyone, i am looking for a tutorial or example file i can download that features the following mouseover effect:

http://www.webdesignerwall.com/demo/...ed-hover2.html

i have tried googling for tutorials and have tried to view source on the above page but when pasted into dreamweaver i cannot seem to get the effect to work.

can anyone help???

thanks!

Hi guys,

I wonder if anyone can help me here,

got this below code for a page im working on,

what you'll notice is that when you hover over 'order' a sub menu appears,

what I need help on is this, how do I make the 'order' remain highlight while Im hovering over the sub menus.

hope im making sense.

thanks in advance.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>test </title>
 
<style type="text/css"> 
#menu {width:800px; height:36px; text-align:left; background:url(red.gif);}
#menu li a {display:block; width:80px; margin-top:5px; height:24px; color:#000; 
	  	   text-decoration:none; padding:0 10px 0 10px; font: bold 12px/22px verdana;}/* This sets the default properties*/
		   
#menu li a:hover{padding:0 9px; border:1px solid #000; background:#444; color:#fff; line-height:24px}/* This sets the hover properties*/
#menu ul {width: 100%;margin: 0 75px auto;}  /* This centres the menu 100px from the left*/

#menu li
{	margin: 0;  padding: 0; list-style: none; float: left;}

#sddm div
{	position: absolute; visibility: hidden; margin: 0; background: #EAEBD8; border: 1px solid #5970B2}

#sddm div a {position: relative; display: block; margin: 0; width: auto; white-space: nowrap; text-align: left; text-decoration: none;
		background: lightgrey; border-left:1px solid black; color: #2875DE;}

#sddm div a:hover{	background: #49A3FF; color: #FFF}
   /* End navigation bar styling. */
   
   /* This is just styling for this specific page. */
   body { font: small/1.3 Arial, Helvetica, sans-serif; }
   
div { text-align:center; }
 
div#page { border:1px solid lightgrey; width:800px; margin:0 auto; padding:5px; text-align:left;}
 
div#header { border:2px solid lightgrey; width:796px; height:100px;}
 
 
div#content { border:2px solid lightgrey; width:796px; min-height:500px; _height:500px}
 
div#footer { border:2px solid red; width:750px; height:30px;}
 
</style>
<script type="text/javascript">
<!--
var timeout         = 1;
var closetimer		= 0;
var ddmenuitem      = 0;

// open hidden layer
function mopen(id)
{	
	// cancel close timer
	mcancelclosetime();

	// close old layer
	if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';

	// get new layer and show it
	ddmenuitem = document.getElementById(id);
	ddmenuitem.style.visibility = 'visible';

}
// close showed layer
function mclose()
{
	if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
}

// go close timer
function mclosetime()
{
	closetimer = window.setTimeout(mclose, timeout);
}

// cancel close timer
function mcancelclosetime()
{
	if(closetimer)
	{
		window.clearTimeout(closetimer);
		closetimer = null;
	}
}

// close layer when click-out
document.onclick = mclose; 
// -->
</script>

</head>
<body>
 
<div id="page">
 <div id="header">Header</div>
 <div id="menu">
 	  <ul id="sddm">
	  	<li><a href="#" onmouseover="mopen('m3')" onmouseout="mclosetime()">Order</a>
		<div id="m3" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
		<a href="#">Visa Credit Card</a>
		<a href="#">Paypal</a>
		</div>
	</li>
	  	  <li><a href="#">Home</a></li>
      	  <li><a href="#">Our Products</a></li>
      	  <li><a href="#">FAQs</a></li>
      	  <li><a href="#">Contact</a></li>
      	  <li><a href="#">Login</a></li>
     </ul>
 </div>
 <div id="content">Content</div>
 <div id="footer">Footer</div>
</div>
 
</body>
</html>

I'm currently generating some tooltips to display data for certain items in a game. The tooltips and stats work great, however, for certain items, the tooltip gets long and will extend pass the viewable range for the user. Here are the links:

test page: http://cory.wellen.googlepages.com/Build_Hover_Test.htm
javascript: http://cory.wellen.googlepages.com/hover.js
css (for hover div only): http://cory.wellen.googlepages.com/affe.css

If you hover over the links of items (like villages, barracks, etc.) a tooltip will pop up to show you the stats. But if you notice, for items like castles, the tooltip can extend past the viewable range for the user.

Any suggestions are greatly appreciated.

I'm trying to create a menu navigation system from the top of the page.
I want it so when I hover over the link, it drops down (the link drops down; so it'd be as if there was a whole field being hidden beyond the 0px mark) with the related field.

I've gotten it to work, somehow but it still isn't right.
A few issues a

- when I hover over .drop_slide and then if I choose to close it by hovering back over the .drop_slide it does as it's told, which is "slide, slide". I'm interested in rectifying this issue so it doesn't do that, however I just don't know how.

- The idea is to have multiple links in the .slide, so I need it to be constantly open while the user mouses over the other links. Should this be created in one field? If so, how would I do that with a drop down in mind?

- Am I approaching this completely wrong? Lol. Should I be researching into .animate? I've been looking at it actually, but I can't get anything to grow negatively. Say; marginTop: -85px or something.

ANY help is appreciated, thanks!

Code:

<html>
<head>
<title>test slide panel</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
        $(document).ready(function(){

        function slide() {
        $("#panel").slideToggle("slow");
        }

        $(".drop_slide").hover(slide, stop);
        $("#panel").hover(stop, slide);
         
});
</script>

<style type="text/css">
body {
        margin: 0 auto;
        padding: 0;
        width: 570px;
        font: 75%/120% Arial, Helvetica, sans-serif;
}
a:focus {
        outline: none;
}
#panel {
        background: grey;
        height: 200px;
        display: none;
}
.slide {
        margin: 0;
        padding: 0;
        background-color: red;
}
.drop_games {
        width: 200px;
        height: 31px;
        padding: 10px 10px 0 0;
        display: block;
        font: bold 120%/100% Arial, Helvetica, sans-serif;
        color: #fff;
        text-decoration: none;
}
</style>
</head>

<body>

<div id="panel">
additional links here...or information
</div>

<p class="slide"><a href="#" class="drop_slide">test link</a></p>


</body>
</html>

Hi

Ive got my menu displayed on this site http://valkesh.000space.com. The issue I am having is that I want the hover image (red part) to be displayed only when hovering the root li, and not all subsequent li items in the menu.. because as you may see now, even when hovering the li in the submenu the red gets displayed.

The code I am using is the following

Code:

<script type="text/javascript">
$(document).ready(function () {
	$('#smoothmenu1 li').append('<div class="hover"></div>');

	$('#smoothmenu1 li').hover(
		function() {
			$(this).children('div').fadeIn('500');	
		}, 
		function() {
			$(this).children('div').fadeOut('500');	
	}).click (function () {
		$(this).addClass('selected');
	});
});
</script>

and

Code:

<div id="smoothmenu1" class="menu">
    <ul>
        <li><a href="#">Page 1</a></li>
        <li><a href="#">Page 2</a>
            <ul>
                <li><a href="#">2.1</a>
                <ul>
                    <li><a href="#">2.1.1</a></li>
                </ul>
                </li>
            <li><a href="#">2.2</a></li>
            <li><a href="#">2.3</a></li>
        </ul>
        </li>
        <li><a href="#">Page 3</a>
            <ul>
                <li><a href="#">3.1</a></li>
                <li><a href="#">3.2</a></li>
                <li><a href="#">3.3</a></li>
            </ul>
            </li>
        <li><a href="#">Page 4</a></li>
    </ul>
</div>

Is there a way to specify in the javascript functionality where to append the div to only the root li item?

Thanks

I have a div with an icon and some text. When the user hovers over the area, a box appears above it with a few links in the box.

I want the user to be able to select any of these links, as well as have the option NOT to select these links and have the box disappear when he moves off of the box.

I can't seem to achieve this with the script I'm using now - right now, as soon as the user moves off of the div/icon and moves the cursor UP to select the links in the box, the box disappears.


Any ideas?

Here's my JS code:

Code:

<script language="JavaScript">
function show_it(){
document.all.box1.style.visibility = "visible";
}
	
function hide_it(){
document.all.box1.style.visibility = "collapse";
}
</script>

Here's my CSS code:

Code:

#box1{
position: absolute;
top: -186px;
left: 147px;
visibility: hidden;
}

#socialmedia-action-items-container {position: relative; float: right;}

#box-wrapper {padding: 0 0 21px 0; height: auto; width: 160px; background: url(../images/socialmedia/sm-funnel.png) 10px bottom no-repeat; float: left;}

#box-main {padding: 10px 10px 0 10px; height: auto; width: 140px; background-color: #cc0000; float: left;}

a.box-item1 { /*flickr*/
	padding: 5px 0 10px 45px;
	height: 36px;
	width: 100%;
	color: #fff;
	background: url(../images/socialmedia/flickr.png) top left no-repeat;
	float: left;
	font-size: 1.3em;
	line-height: 0.8em;}
a.box-item1:hover {
	color: #000;
	background: url(../images/socialmedia/flickr-over.png) top left no-repeat;}
	
a.box-item1 span {font-size: 0.7em;}
	
a.box-item2 { /*facebook*/
	padding: 5px 0 10px 45px;
	height: 36px;
	width: 100%;
	color: #fff;
	background: url(../images/socialmedia/facebook.png) top left no-repeat;
	float: left;
	font-size: 1.3em;
	line-height: 0.8em;}
a.box-item2:hover {
	color: #000;
	background: url(../images/socialmedia/facebook-over.png) top left no-repeat;}
	
a.box-item2 span {font-size: 0.7em;}

a.box-item3 { /*twitter*/
	padding: 5px 0 10px 45px;
	height: 36px;
	width: 100%;
	color: #fff;
	background: url(../images/socialmedia/twitter.png) top left no-repeat;
	float: left;
	font-size: 1.3em;
	line-height: 0.8em;}
a.box-item3:hover {
	color: #000;
	background: url(../images/socialmedia/twitter-over.png) top left no-repeat;}
	
a.box-item3 span {font-size: 0.7em;}

Here's my HTML code:

Code:

<div id="socialmedia-action-items-container">

<a class="twitter" onMouseOver="show_it()" onMouseOut="hide_it()">
                <span class="twitter-first">Follow Us on</span><br />
                <span class="twitter-last">Twitter</span>
</a>
            
            <div id="box1">
                <div id="box-wrapper">
                    <div id="box-main">
                        <a href="#" class="box-item1">Follow us <br /><span>on Flickr</span></a>
                        <a href="#" class="box-item2">Follow us <br /><span>on Facebook</span></a>
                        <a href="#" class="box-item3">Follow us <br /><span>on Twitter</span></a>                    </div>
                </div>
            </div>

</div>

Much appreciated!