1

マウスを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 と div のスタイリングは無関係だと思います。そうでない場合は、ここに投稿します。

4

2 に答える 2

8

次の HTML の場合、これを行う 1 つの方法を次に示します。

<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 フィドルのデモ。

参考文献:

于 2012-04-10T22:26:46.473 に答える
0

多くは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);
    }
);
于 2012-04-10T22:14:44.863 に答える