jQuery close button effect/style

Question

Я хочу добиться эффекта, когда появляется кнопка закрытия после некоторого времени наведения мыши на div. Как я мог это сделать? кстати, я так новичок в jQuery.

Вот пример того, что-то похожее на то, что я хочу

что «х» в углу, я хочу, чтобы появиться в одном из моих проектов.

Спасибо всем

То, что я сделал до сих пор:

JQuery:

$("#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}); 
    $(".close-button").show(); 
}); 

ДИВ и стилизация DIV я думаю, не имеет никакого значения, если нет, то я бы разместить его Вот.

Answer 1

Вот один из способов сделать это, учитывая следующие 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> 
<div class="modal"> 
    <span class="close">X</span> 
    <p>Some text in the second modal div</p> 
</div>​ 

И 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; 
}​ 

И JQuery:

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

$('.modal').hover(
    function() { 
     // while hovering over the modal, it fades the close element in after a delay 
     $(this).find('.close').delay(1000).fadeIn(500); 
    }, 
    function() { 
     // after leaving/mouseout of the the modal, has a delay and then fades the close out 
     $(this).find('.close').delay(1000).fadeOut(500); 
    }); 

$('span.close').click(
    function(){ 
     // clicking the close span causes the closest ancestor modal to fadeout 
     $(this).closest('.modal').fadeOut(1000); 
    });​ 

JS Fiddle demo.

Ссылки:

• click().
• closest().
• eq().
• fadeIn().
• fadeOut().
• fadeToggle().
• find().
• index().

Answer 2

Много шарниров на вашем HTML и CSS. На данный момент предположим, что поле является элементом div, а кнопка закрытия является дочерним div в поле. Вы могли бы сделать что-то вроде этого ...

$(".boxes").hover(
    //do this on mouse over... 
    function() { 
     var me = $(this); 
     me.find('.closeButton').delay(1000).fadeIn(500); 
    }, 
    //do this on mouse out... 
    function() { 
     var me.find('.closeButton').fadeOut(100); 
    } 
);