0

だから私はHTML、CSS、およびjQueryを使っていくつかの小さなものに取り組もうとしています. 私がやろうとしていることの 1 つは、div の上にマウスを置くたびに div をスライドさせることです。私が今持っているコードは次のようになります。

$(document.ready(function(){
     $('div').mouseover(function(){
           $('div').slideDown('slow');
     };
     $('div').mouseout(function(){
           $('div').slideUp('slow');
     });
});

ただし、何らかの理由で、これは機能していないようです。すべてが適切にリンクされ、CSS とその他すべてが正しくコーディングされていると仮定します。mouseover() と mouseout() がコード内にある場合にのみ、おかしくなり始めます。誰かが理由を教えてもらえますか? 「トリガー」divが他の上にあるときにこれを機能させることができるので、マウスが「トリガー」divの上に置かれると、一番下のものがスライドダウンします。1 つの div を下にスライドさせることについての助けをいただければ幸いです。

ありがとう！

4

3 に答える 3

0

に括弧がありませんmouseover()

$(document.ready(function(){
     $('div').mouseover(function(){
           $('div').slideDown('slow');
     });
     $('div').mouseout(function(){
           $('div').slideUp('slow');
     });
});
于 2013-07-26T22:28:06.917 に答える
0

以前に報告されたように、最初のハンドラーの最後に閉じ括弧がありません。

ハンドラー内では、ドキュメントのすべての div$(this)ではなく、イベントを発生させた要素への参照を使用する必要があります。

$(document.ready(function(){
     $('div').mouseover(function(){
           $(this).slideDown('slow');
     });
     $('div').mouseout(function(){
           $(this).slideUp('slow');
     });
});

また、より具体的なセレクターを処理することをお勧めしますdiv... そのような紛らわしいセレクターを使用すると、ページが「何も変更できない」状態になります。次のようなマークアップを使用します。

<div class="hover-effect">
    <!--  content -->
</div>

次のようなものがあります。

$('.hover-effect').mouseover(/* ... */);
$('.hover-effect').mouseout(/* ... */);

アップデート：

あなたが提供したjsfiddleによると、基本的に、表示されていないdivでマウスオーバーイベントを処理しようとしています。コードは期待どおりに機能します。野球をしていると、ボールがまだ投げられていないときにボールを打とうとする壮大な時間がきっとあります。

まず、常に一定の幅と高さを持つコンテナーが必要です。これを確実にする 1 つの方法は、コンテナーに上部パディングを設定することです。そのコンテナー内で、スライダーは「何もない」状態にならずに好きなようにスライドできます。自由なポインター効果の利点のために、リンクとして表示されることを意図していると仮定しました。

これを試して：

HTML

<a class="slider-container" href="#">
    <div class="slider"></div>
</a>

CSS

.slider-container {
    display:block;
    width:100px;
    padding-top:25px;
    background-color:#000000;
}

.slider {
    width: 100px;
    height: 100px;
    background-color:#000000;
    display:none;
}

Jクエリ

$(document).ready(function(){
    var $slider_container=$('.slider-container');

    $slider_container.mouseover(function(){
        $('.slider',this).stop().slideDown('slow');
    });

    $slider_container.mouseout(function(){
        $('.slider',this).stop().slideUp("slow");
    });
});

この動作中のFIDDLEを見てください

于 2013-07-26T22:32:21.500 に答える
0

Frederik が指摘したように、DOM に隠されているものをターゲットにすることはできません。mouseover簡単な答えは、次のように、mouseoutイベントのトリガーとして機能する別の要素を持つことです。

HTML

<div id="trigger">Hover Me</div>
<div id="slider"></div>

CSS

#slider {
  display: none; /* etc */
}

jQuery

    $("#trigger").mouseover(function(){
        $('#slider').slideDown("slow");
    });
    $("#trigger").mouseout(function(){
        $('#slider').slideUp("slow");
    });
于 2013-07-27T08:00:15.440 に答える