jQuery++ - jQuery.within

Demo for the jQuery.within plugin

HTML

<script src="http://jquerypp.com/release/latest/jquerypp.js"></script>
<svg>
    <rect id="outer" x=10 y=10 width=60 height=60 style="fill:#ff0000" />
    <rect id="inner" x=80 y=10 width=60 height=60 style="fill:#ffcc00" />
    <rect id="absolute" x=50 y=30 width=60 height=60 style="fill:#0000ff"  />
</svg>
<p id="status"></p>

CSS

body{ 
    font-family: Helvetica,"Lucida Grande","Lucida Sans",Arial,Helvetica,sans-serif;
}

div, p {
    padding: 10px;
}

#status span {
    color: #505050;
    font-weight: bold;
}

#outer {
    width: 250px;
    height: 190px;
    background-color: red;
}

#inner {
    background-color: blue;
}

#absolute {
   position: absolute;
   background-color: green;
   top: 20px;
   left: 100px;
   height: 150px;
   width: 180px;
}

JavaScript

$(document).on('mousemove', function(ev) {
    var ids = $('rect').within(ev.pageX, ev.pageY).map(function(i, el) {
        return '#' + el.id + ' ';
    }).get();
    $('#status').html("$('div').within("
        + ev.pageX + ', '
        + ev.pageY + '): <br/><span>'
        + ids.join(', ') + "</span>");
});