0

空白を描くだけで、これは簡単です。

このページを見ると（すべてのJS / CSSが1ページにあります）、http：//dl.dropbox.com/u/904456/expander.html

あなたは私が持っているものを見ることができます。基本的に私は2つのことを違うやり方でやりたいと思います。

A.）ホバーされた.moduleの.module .captionのみを表示し、どちらかがホバーされたときに両方を表示したくありません。B.）単に.show（）ではなくslideOutを実行し、単に.hide（）ではなくslideInを実行したい（ホバーおよびホバー解除時）。

$(document).ready(function() {
  $(".module .caption").hide();
  $(".module").hover(function() {
    $(".module .caption").show(); 
    },function() {
    $(".module .caption").hide();   
  });
});

そして、私のマークアップは次のようになります。

 <div class="module span-1">
      <div class="inside">HOVER</div><!-- end .inside -->
        <h1>TITLE</h1>
        <div class="caption">
          <p>Caption ipsum lorem dolor ipsum lorem dolor ipsum lorem dolor ipsum lorem dolor</p>
        </div><!-- end .caption -->
    </div><!-- end .module -->

 <div class="module span-2">
  <div class="caption">
          <p>Caption ipsum lorem dolor ipsum lorem dolor ipsum lorem dolor ipsum lorem dolor</p>
      </div><!-- end .caption -->
      <div class="inside">HOVER</div><!-- end .inside -->
        <h1>TITLE</h1>
    </div><!-- end. module -->

いくつかの支援が大好きです！そして、あなたが特に寛大であると感じたら、あなたの方法についての説明（次回）。ありがとう！

4

1 に答える 1

1

を呼び出すことにより、クラスを持つ要素内$(".module .caption").show();のクラスを持つすべての要素を表示しています。代わりに、問題の要素（ホバーされた要素）を使用します。これは、を使用して参照できます。次に、好きなように切り替えるだけです。オプションについては、 jQueryEffectsAPIを参照してください。これは、目的の効果を得る1つの方法です。captionmodule$(this)

 $(document).ready(function() {
  $("div.module div.caption").hide();
  $("div.module").hover(function() {
     $(this).find("div.caption").slideDown(); 
   },function() {
     $(this).find("div.caption").slideUp();   
   });
 });

編集：フォームのセレクターを使用するよりも、$('.className')一般的に使用する方が適切です。このセレクターは、DOM内のすべての要素をループして、指定されたクラスの要素を探すのではなく$('tag.className')、ネイティブのJavascriptメソッドを使用するためです。getElementsByTagName

于 2010-06-05T00:49:14.353 に答える