...

View Full Version : Hide on Mouseover



Jus S
07-31-2008, 03: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>

abduraooft
07-31-2008, 03: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, 03:54 PM
abduraooft,

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

Jus S

ninnypants
07-31-2008, 04: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, 07: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"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>untitled</title>
<style type="text/css" media="screen">

.hide {
display: none;
}

</style>
<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 = '';
}

}

</script>
</head>
<body>

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

<table id="tableNode">
<tr><td>blah</td></tr>
</table>

</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum