Search code examples
jqueryswapmouseenter

jQuery - Swap DIV on Mouseover

Is it possible to perform a swap or show/hide when hovering over a div?

For example, say I have two DIVs:

<div id="box1">content of box 1</div>
<div id="box1-hover">you are hovering on this box</div>

Box 1 should be displayed on the page, with box1-hover hidden, then, when you hover over box 1, box1-hover should become visable OVER THE TOP OF IT (so it basically looks like a swap). Then when you mouseout, box1-hover becomes hidden again.

Is this do-able? If so, can someone demonstrate with a jsfiddle?

Thanks Zach

Solution

  • Sure. You will want to investigate .mouseenter, .mouseleave, .show, and .hide. The code below should get you most of the way there.

    $(document).ready(function() {
    $("#box1").mouseenter(function() {
        $("#box1-hover").show();
    }).mouseleave(function() {
        $("#box1-hover").hide();
    });
});

    For CSS you will want to understand z-indices and absolute positioning inside relative positioning. The Z index indicates how "high" in the page an element is (think of things as coming towards you). An absolutely positioned item in a relatively positioned item is absolutely positioned against the parent and not the page.

    The CSS needed:

    #box1 {
    z-index: 2;
    float: left;
    position: relative;
}

#box1-hover {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 1;
}

    Note that the div for box1-hover is nested in box1 in this instance

    see it in action