jQuery Forum

1. $( 'body' ).on( 'mouseenter', '#branding .widget-area', function( e ) {
2.       $( this ).children( 'aside' ).children( 'a' ).attr( 'style', function() {
3.             var      w = $( this ).width(),
4.                       s = Math.ceil( w / 2 )
5.             return 'margin-right:-' + s + 'px;'
6.       }).fadeIn( 300 )
7. }).on( 'mouseleave', '#branding .widget-area', function( e ) {
8.       $( this ).children( 'aside' ).children( 'a' ).fadeOut( 300 )
9. })

1. <style>
2. #branding .widget-area aside > a {
3.       display: none;
4.       position: absolute;
5.       right: 50%;
6.       z-index: 10;
7.       padding: 5px;
8. }

1. <header id="branding">
2.       <hgroup><h1>quack</h1><h2>quack quack</h2></hgroup>
3.       <div class="widget-area">
4.             <aside class="widget widget_wp_views">
5.                   <h3>Quotation</h3>
6.                   <a><div><div><img /></div></div></a>
7.             </aside>
8.       </div>
9. </header>

P.S. The editor's font color picker does not function correctly, at least not in Opera 12.02

1. $( 'body #branding .widget-area' ).hover(
2.       function( e ) {
3.             $( this ).children( 'aside' ).children( 'a' ).attr( 'style', function() {
4.                   var w = $( this ).width(),
5.                        s = Math.ceil( w / 2 )
6.                   return 'margin-right:-' + s + 'px;'
7.             }).fadeIn( 300 )
8.       },
9.       function( e ) {
10.             $( this ).children( 'aside' ).children( 'a' ).fadeOut( 300 )
11.       }
12. )