How to show/hide div on the current mouse over element?

Question

I want to write a script which allow the user when hovering on any element on the page "such as a, img, div" another hidden element will show on this current element and will have its position, width, height with transparent color.
How to do that using javascript/jquery?

Answer 1

Start by attaching a mouseover event to the element

$(function(){
    $("#myElementId").mouseOver(myMouseOverHandler);
});

Then write a function to handle the event

function myMouseOverHandler(e)
{
    var width = $(this).width();
    var height = $(this).height();
    var top = $(this).offset().top;
    var left = $(this).offset().left;

    // set the element with these parameters
    var el = $("#myHiddenElement");

    el.width(width);
    el.height(height);
    el.css({ "top":top, "left":left, "position":"absolute" });

    el.show();
}