No1Lives4Ever No1Lives4Ever - 1 month ago 27
jQuery Question

jquery floating div on hover

What I have?


  1. A html-table which has a lot of rows.

  2. A hidden (display=none) div which contains some input controls (lets call it "div-to-display"). Only one div-to-display in whole page.



What I'm trying to do?

When the mouse hovers on the first cell in each row - show the "div-to-display" below it (like tool tip).

But, I can't create a separated div-to-display div for each table row. All cells must use the same "div-to-display" element.

While showing the div-to-display div, it should be float. What it means is that it won't change the location of the other cells in the table. It will be above them.

Do you have idea how to do this with
jquery
`javascript`?

Answer

DEMO: http://jsfiddle.net/sBtxq/

JQuery

// Add our div to every td
$('td').append('<div class="div-to-display">yay</div>');

CSS

.div-to-display {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    border: 1px solid red;
    background-color: #eee;
    z-index: 10;
}
td {
    position: relative;
}
td:hover > .div-to-display {
    display: block
}

Updated (non-JS) version

CSS

td {
    position: relative;
}
td:after {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    border: 1px solid red;
    background-color: #eee;
    z-index: 10;
    content: "yay";
}
td:hover:after {
    display: block
}

DEMO: http://jsfiddle.net/sBtxq/20/

Comments