JQuery close button effect/style


I want to achieve an effect where a close button appears after some time of hovering the mouse on a div. How could I do that? by the way, I'm so new to jQuery.

Here is an example of something similar to what I want

enter image description here

That "x" in the corner I want to appear in one of my designs.

Thanks to everyone

What I have done so far:


$("#slider #content").on("hover", '.element', function(evt) {
    var top, left;
    top = $(this).offset().top;
    left = $(this).offset().left;
    $(".close-button").css({"top":top, "left":left});

The div and the styling of the div I guess is irrelevant if not, I would post it here.

Best Solution

Here's one way of doing this, given the following HTML:

<a href="#" class="modalShow">show modal</a> <a href="#" class="modalShow">show modal</a>
<div class="modal">
    <span class="close">X</span>
    <p>Some text in the first modal div</p>
<div class="modal">
    <span class="close">X</span>
    <p>Some text in the second modal div</p>

And the CSS:

.modal {
    display: none;
    width: 50%;
    padding: 0.5em;
    min-height: 6em;
    border: 10px solid #000;
    border: 10px solid rgba(0,0,0,0.5);
    position: absolute;
    top: 20%;
    left: 50%;
    margin-left: -25%;
span.close {
    display: none;
    position: absolute;
    top: -2.5em;
    left: -2.5em;
    width: 2em;
    height: 2em;
    text-align: center;
    line-height: 2em;
    border: 10px solid #000;
    border: 10px solid rgba(0,0,0,0.5);
    border-radius: 2em;
    background-color: #fff;
    cursor: pointer;

And the jQuery:

    function() {
        // finds which link was clicked, and therefore which modal to show
        var i = $(this).index('.modalShow'); 
        // fades all the modal elements out
        // fades the relevant modal in

    function() {
        // while hovering over the modal, it fades the close element in after a delay
    function() {
        // after leaving/mouseout of the the modal, has a delay and then fades the close out

        // clicking the close span causes the closest ancestor modal to fadeout

JS Fiddle demo.