We are trying to code for a toolbar used in each <li> on the page. The goal is to show the toolbar whenever we are hovering over the contents of the <li> so that we can either edit or delete the content. Is this example, the content is the text within the <a> tag.
We tried to script the code so that span.toolbar was displayed whenever we received a mouseover/out event for toolbar-container. The problem is that as the mouse moves over each element (.toolbar- container, <a>, .toolbar, <img>), we lose the context of the parent element, i.e. the parent element receives a mouseout and the child receives a mouseover. I have include sample code below. We have tried NUMEROUS permutations of the code using z-indexes, event delegates, etc. to no avail. I stripped out all but the logging code in hopes of starting with a fairly clean slate. So, can anyone shed some light? I'm not sure if this is the correct forum, but this encompasses jquery (our choice), html and css, so I thought I would take a shot. Please let me know if you would suggest a better venue. Any help would be most appreciated. <html> <head> <title>Toolbar Hover Sample</title> <script src="jquery.js" type="text/javascript"></script> <script src="jquery.delegate.js" type="text/javascript"></script> <script> $(document).ready( function(){ $('ul').delegate( 'mouseover', 'li', function( event ){ console.log('mouseover li'); }); $('ul').delegate( 'mouseout', 'li', function( event ){ console.log('mouseout li'); }); $('ul').delegate( 'mouseover', '.toolbar-container', function ( event ){ console.log('mouseover .toolbar-container'); }); $('ul').delegate( 'mouseout', '.toolbar-container', function ( event ){ console.log('mouseout .toolbar-container'); }); $('ul').delegate( 'mouseover', 'a', function( event ){ console.log('mouseover a'); }); $('ul').delegate( 'mouseout', 'a', function( event ){ console.log('mouseout a'); }); $('ul').delegate( 'mouseover', '.toolbar', function( event ){ console.log('mouseover .toolbar'); }); $('ul').delegate( 'mouseout', '.toolbar', function( event ){ console.log('mouseout .toolbar'); }); $('ul').delegate( 'mouseover', 'img', function( event ){ console.log('mouseover img'); }); $('ul').delegate( 'mouseout', 'img', function( event ){ console.log('mouseout img'); }); }); </script> </head> <body> <h1>Toolbar Hover Sample</h1> <ul> <li> <div class="toolbar-container"> <a>Super Secret Stuff</a> <span class="toolbar" style="display:none;"> <img src="edit.png"/> <img src="delete.png"/> </span> </div> </li> </ul> </body> </html>