Extended Hover area

by Greggg

HTML

<div id="slender-trigger"></div>

CSS

#slender-trigger {
height: 120px;
width: 120px;
position: relative;
border: 2px dashed grey;
}
#slender {
position: relative;
display: none;	

}

JavaScript

$("#slender-trigger").after('<div id="slender" style="background: url(http://lorempixel.com/120/100/people) center bottom no-repeat; height: 100px; width: 120px;">sadfasdf</div>');

$("#slender-trigger, #slender").on("mouseenter", function() {
      $("#slender").show();
        
}).on("mouseleave", function() {
      $("#slender").hide();
});