Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Jun 2008
    Posts
    17
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Hide on Mouseover

    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?

    Code:
     <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>

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,864
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Have a look in to the DOM display property
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    Jus S (07-31-2008)

  • #3
    New Coder
    Join Date
    Jun 2008
    Posts
    17
    Thanks
    7
    Thanked 0 Times in 0 Posts
    abduraooft,

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

    Jus S

  • #4
    Regular Coder ninnypants's Avatar
    Join Date
    Apr 2008
    Location
    Utah
    Posts
    504
    Thanks
    10
    Thanked 47 Times in 47 Posts
    Do the same thing but have it display block or inline. Then add that to the "onmouseout" event.

  • Users who have thanked ninnypants for this post:

    Jus S (07-31-2008)

  • #5
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    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)

    Code:
    <!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>

  • Users who have thanked Bill Posters for this post:

    Jus S (07-31-2008)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •