How do I include an element's margin in the hot-spot for jQuery's hover() event?

You could use a 50px transparent border instead - the margin isn't really supposed to be mouseable...

Include a pseudo element, e.g.

.my_container:before {
    content:'';
    position:absolute;
    top:-50px;
    bottom:-50px; 
    left:-50px;
    right:-50px; 
}

This adds an extra 50px to the existing element's clickable area.

If you only want to add this on touch screen devices, you could do this:

.touchevents .my_container:before {
    ...
}

This requires something like Modernizer to insert the appropriate feature-based CSS class.

Perhaps use a 2nd wrapper element with padding on the outer element and existing background and padding styles on the inner element:

<div class="my_container">
    <div class="my_container_inner">
        <!-- etc. -->
    </div>
</div>

jQuery(".my_container").hover(function(){
  //do code
}, function(){
  //do code
});

.my_container { padding: 50px; }
.my_container_inner { width: 100px; height: 100px; /* etc. */ }

Related