3

これには簡単な解決策があるかもしれませんが、私はJquery初心者です。助けてください。マウスオーバーで別の DIV に DIV を表示するにはどうすればよいですか?

例、私はこれを持っています：

<div class="box"> Info about a game </div>

div「ボックス」に別のdivを「オーバーレイ」したい

<div class="overlay"> Play </div>

JQueryでそれを行うにはどうすればよいですか?

申し訳ありませんが、よろしくお願いします！

4

3 に答える 3

33

私があなたを正しく理解していればoverlay、ホバーしたときにのみ表示したいbox.

CSS 疑似を使用できます:hover:

<div class="box">
    Info about a game
    <div class="overlay"> Play </div>
</div>​

div.box div.overlay
{
    display:none;
}

​div.box:hover div.overlay
{
 display:block;   
}​

http://jsfiddle.net/Curt/BC4eY/

animation/jquery を使用して表示/非表示にしoverlayたい場合は、次を使用できます。

$(function(){
    $(".box").hover(function(){
      $(this).find(".overlay").fadeIn();
    }
                    ,function(){
                        $(this).find(".overlay").fadeOut();
                    }
                   );        
});​

http://jsfiddle.net/Curt/BC4eY/2/

于 2012-04-10T11:16:33.813 に答える
3

必要な場所に配置されるクラス「about」を持つ別の DIV 要素を持つことができます。また、CSS スタイル: opacity:0; を持ちます。

次に、JS では、onload / ready 関数に配置される小さなスクリプトを作成する必要があります。

$(document).ready(function() {
  $('div.box').hover(function() {
    $(this).children('.overlay').fadeIn();
  }, function() {
    $(this).children('.overlay').fadeOut();
  });
});

この要素が何かを上に重ねる場合は、CSS 属性「display:none」を使用して、この透明な要素がマウス イベントを引き継ぐのを防ぐことをお勧めします。

于 2012-04-10T11:19:14.490 に答える