View Full Version : Hide on Mouseover

Jus S
07-31-2008, 04:37 PM
How do I get the red box to disappear once the user mouses over the text, then reappear when the user moves the mouse off of the text?

<p align="center"><a href=null>Hide Cell</a></p>

// <table id="tableNode" align="center">
// <tbody>
// <tr><td colspan="30" rowspan="30" height="30"

// bgcolor="red"></td></tr>
// <tbody>
// </table>

07-31-2008, 04:39 PM
Have a look in to the DOM display property (http://www.w3schools.com/htmldom/prop_style_display.asp)

Jus S
07-31-2008, 04:54 PM

That made the box disappear but how do I get it to reappear once the user mouses off of the text?

Jus S

07-31-2008, 05:03 PM
Do the same thing but have it display block or inline. Then add that to the "onmouseout" event.

Bill Posters
07-31-2008, 08:08 PM
Alternatively, use js to add/remove a className value and have that CSS selector display: none; in the stylesheet, where style shenanigans ideally belong.

e.g. (rough and ready)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css" media="screen">

.hide {
display: none;

<script type="text/javascript">

window.onload = function() {

var el1 = document.getElementById('toggler');
var el2 = document.getElementById('tableNode');

el1.onmouseover = function() {
el2.className = 'hide';

el1.onmouseout = function() {
el2.className = '';



<p id="toggler">Hide Cell</p>

<table id="tableNode">