[jQuery] Toolbar hover sample
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>