Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<html>
    <body>
        <header id = "header" onmouseover = "statusSet( this )">
            <p>Header</p>
        </header>
        
        <section id = "body">
            <div id = "area1">
                <div>
                    <p id = "p1" onmouseover = "statusSet( this )">
                        paragraph
                    </p>
                    <p id = "p2" onmouseover = "statusSet( this )">
                        paragraph
                    </p>
                    <p id = "p3" onmouseover = "statusSet( this )">
                        paragraph
                    </p>
                </div>
            </div>
        </section>
        
        <footer><p id = "statusBar">Status Bar</p></footer>
​
        <script>
            document.body.addEventListener( 'mouseover', function( element ){
                statusSet( element.target );
            });
​
            function statusSet( element ){
                var elementId = element.id;
                var elementInner = element.innerHTML;
                
                if( elementId == 'body' || elementId == 'statusBar'  ){
                    document.getElementById( 'statusBar' )
                    .innerHTML = 'hovering over body';
                }
                else if( element.parentElement.parentElement
                .parentElement.id == 'body' ){
                    document.getElementById( 'statusBar' )
                    .innerHTML = 'hovering over paragraphs';
                }
                else if( element.id == 'header' ){
                    document.getElementById( 'statusBar' )
                    .innerHTML = 'hovering over header';
                }
            }
        </script>
    </body>
</html>
 
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers