The following CSS styling code can go in your style sheet or in the head tag of your html page, and is used to deliver custom rollover content when a user mouse rolls over some element on our html page. You can adjust the values in all of the attributes, play with the values a bit to get it just like you need it. Deliver more content in a smarter way using a lot less real estate with our magic CSS hover boxes. Works in Internet Explorer, Firefox, and Safari browsers.

Working Demo: Put your mouse on me Here is the content I want to show on roll over or hover and I can put whatever I want in here. You can define all of the colors, place a background image, and more!

Here is the CSS for it, the HTML is in the next box below.

.rollOverContent{ position: relative; z-index: 0; } .rollOverContent:hover{ background-color: transparent; z-index: 50; } .rollOverContent span{ position: absolute; width: 280px; height: 75px; background-color:#000000; left: -1000px; visibility: hidden; text-decoration: none; color:#FFFFFF; padding:8px; } .rollOverContent span img{ border-width: 0; padding: 2px; } .rollOverContent:hover span{ visibility: visible; top: -94px; left: 2px; }

And the HTML you will need to place in the Body section of your page is below.
This is the exact code in the example at the top working on this page.

Working Example: <a class="rollOverContent" href="#" onclick="return false"><em><strong><u>Put your mouse on me</u></strong></em> <span> Here is the content I want to show on roll over or hover and I can put whatever I want in here. You can define all of the colors, place a background image, and more! </span></a>

You have to make sure you get this HTML structure right or else the hover will fail. And remember that you can place any content you like in the hover box. Set border width and colors, define background images, place image tags, swf files, and more.