Solution for kali90

Complete re-write of jQuery, simplification of html and css. The major change is to use <div> and <img> instead of the <div> + <a> + <img>. ---------------------------------------- In answer to:- https://forum.jquery.com/topic/hover-append-element-can-t-remove-on-mouseout

HTML

<div id="wrapper">
        <aside></aside>
        <div id="content">
            <section id="top">
                <output id="test"></output>
            </section>
            <section id="links">
                <div class="bg"><img src="" alt="" /></div>
                <div class="bg"><img src="" alt="" /></div>
                <div class="bg"><img src="" alt="" /></div>
                <div class="bg"><img src="" alt="" /></div>
                <div class="bg"><img src="" alt="" /></div>
                <div class="bg"><img src="" alt="" /></div>
                <div class="bg"><img src="" alt="" /></div>
                <div class="bg"><img src="" alt="" /></div>
                <div class="bg"><img src="" alt="" /></div>
                <div class="clear"></div>
            </section>
            <!--<div class="clear"></div>-->
        </div>
        <div class="clear"></div>
    </div>

CSS

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video, textarea, input {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-family:verdana,helvetica,arial,geneva; font-size:15px; color:#808080;
    font-weight:normal;
    font-style:inherit; 
    vertical-align:baseline;
    /*
    font-size:100%;
    background:transparent;
    */
}

/* to fix a mozilla bug -- because of this line this stylesheet only validates in CSS 3...  */
html {overflow-y:scroll; }

body {padding:0 0 40px 0; background:#000; }
.clear {clear:both; font-size:0; line-height:0; height:0; } 
p {margin:0 0 15px 0; }
a, a:visited, a:active {text-decoration:none; color:#c80000; }
/*0092bf*/
#wrapper {margin:0 auto; width:1100px; background:#FFF;  padding-top:2px;}


header {height:64px; width:100%; margin:0 0 46px 0;  }


header a#logo { background:url('http://mayacove.com/dev/jq/images/logo_black.png') no-repeat; text-indent:-9999px; display:block; 
                width:160px; height:64px; display:block; } 



header a, header ul {float: left; }


header ul:last-child:after {clear:both; content:"test - clear div"; height:0; font-size:0; line-height:0; 
                 /*border:solid 1px green;*/ display:block; }



header ul {float:left; /*border:solid 1px green;    */}
header ul {list-style:none;  } 
header ul li { display:inline-block; margin:0; /*border:solid 1px red; */ } 

ul#nav_main {margin:30px 0 0 60px;  } 
ul#nav_main li {padding: 0 20px ;  border-right:solid 2px #ccc; }
ul#nav_main li a {text-transform:uppercase; color:#0092bf; font-size:18px; font-weight:bold; } 
ul#nav_main li:last-child { border:0; ...

JavaScript

$(document).ready(function () {
    $('#links div.bg').each(function (i) {
        $(this).css('background-image', 'url(http://mayacove.com/dev/jq/images/item' + (i + 1) + '.png)');
        $(this).data('idx', i + 1);
        $('img', this).attr('src', 'http://mayacove.com/dev/jq/images/item' + (i + 1) + '_roll.png');
    });
    $('#links div.bg').on({
        mouseenter: function () {
            $(this).children().show();
        },
        mouseleave: function () {
            $(this).children().hide();
        },
        click: function () {
            $('#test').text('Selected index: ' + $(this).data('idx'));
        }
    });
});