How can I highlight an area element using jquery?
I am new to Javascript.
I have a background image (a graph) and many overlapping elements (rectangles) with associated overlay text that is positioned to the side of the graph.
I would like to highlight all rectangles associated with a pixel each time I mouse over that pixel. In my code below I've succeeded in showing the overlay text for all rectangles associated with a certain pixel (not just the top rectangle in the z-layer). How can I also display all rectangles that contain the pixel that I have moused over?
This is the attempt:
if ( $('#demo').length >0 ) { var elementPositions = []; $('#demo area').each(function() { var offset = this.coords, coordarray = offset.split(","), left = coordarray[0], top = coordarray[1], right = coordarray[2], bottom = coordarray[3], id = this.id, hoveredElements = []; elementPositions.push({ element: $(this), top: top, bottom: bottom, left: left, right: right, id: id, }); $("body").mousemove(function(e) { hoveredElements.forEach( function(item) { item.overlay.hide(); }); hoveredElements = []; var xPosition = e.pageX; var yPosition = e.pageY; for (var ie = 0; ie < elementPositions.length; ie++) { var test = elementPositions[ie].id; if (xPosition >= elementPositions[ie].left && xPosition <= elementPositions[ie].right && yPosition >= elementPositions[ie].top && yPosition <= elementPositions[ie].bottom) { // The mouse is within the element's boundaries hoveredElements.push({ element: elementPositions[ie].element, overlay: $('#overlay' + test), // store overlay too id: test }); } } //end of for loop over all elements hoveredElements.forEach( function(item) { item.overlay.show(); item.element.show(); }); }); }); }