CSS and JavaScript: Mouseover

Sometimes, squeezing text or extra images onto a webpage makes the entire layout look unprofessional and clustered. In order to help clean up the initial look of the page, some designers use the “mouseover” effect with both CSS, HTML, and JavaScript tags. The secret is to make the thing that triggers the mouseover a link.


As mentioned in a previous blog post, webpages are made up of divs. Each div holds its own information, like a drawer with little sections in it. One “div”, or drawer section, has socks, another has undies, another has belts, another has whatever else people put in drawers.

1) For the mouseover effect, we’ll use “spans” instead of “divs”. They’re pretty much the same, but unlike divs, we don’t have to mention them in CSS. We’ll call the spans with the pop-up mouseover content “pop”.

<span id=”pop”>


2) Next, we’ll create a “class.” If you’re not sure yet what a class is, check out a tutorial about classes. Basically, they’re very similar to divs. We’re going to class the “pop” span as “pop_up”.

<span id=”pop” class=”pop_up”>


3) Fill in the content you want in the pop-up box between the span tags!

<span id=”pop” class=”pop_up”>

<p>Lookit! A box pops up when you mouse over! Read my EXCITING information!</p>


4) Next, make whatever you want on the page to trigger the mouseover a link. Leave it as an empty link for now. You can use an image, text, anything.

<a href=”x”>Hover over me!</a>


This is where we specify the background color, the size, and the positioning of your pop-up box. This is achieved by merely playing around with the pixel numbers to get the size you want.

Here is some example code:

.popup {














Remember that classes are defined in CSS with a period preceding the name of the class, while ids have a pound sign.


This section is a little harder to explain. JavaScript, if you take the time and try it in small doses, is really simple to understand. What you want is for the browser to realize that you want the content in span “pop” with class “pop_up” to appear when someone mouses over a specific item on your page. So, let’s tell it to do that with JavaScript.

1) First, we’ll focus on the JavaScript in the <head></head> section of your page. Start with the JavaScript identifier tags.

<script language=”JavaScript”>


2) Next, let’s start a function. We’ll start the function that shows the pop-up window.

<script language=”JavaScript”>

function ShowPop (id)



3) Now, we’ll add the function that hides the pop-up window.

<script language=”JavaScript”>

function ShowPop (id)


function HidePop (id)



4) As you can see, the JavaScript, once you think about it, makes sense! Now we’ll move on to the JavaScript contained in the <body></body> section of the page. This is inline JavaScript, nested within other HTML tags.

5) Remember the <a href=”x”></a> tags we made earlier? Now we’re going to give that link a target. The target will be the JavaScript to open up a pop-up box.

6) First, we tell the browser that the link itself is “void”, it’s only going to specify JavaScript.

<a href=”javascript:void(0);“>


7) Next, we’ll tell it what JavaScript to listen to when someone mouses over the linked item.

<a href=”javascript:void(0);” onMouseover=”ShowPop(‘pop’);”>


See the connection? “ShowPop(id)” in the <head>section is specified here by replacing (id) with the span id name!

8) Now we’ll tell the browser what JavaScript to listen to as someone moves the mouse away from the linked item.

<a href=”javascript:void(0);” onMouseover=”ShowPop(‘pop’);” onMouseout=”HidePop(‘pop’);”>



Now you can text it and see if you need to change the size of the mouseover box or the background colors! To see a “real live” example, check out an assignment website I completed for another class. Right click the screen and choose “View Page Source” in order to see the code.


~ by him22 on March 21, 2011.

%d bloggers like this: