2

素敵な「製品」ページを作成しようとして問題が発生しました。次のHTMLがあります。

    <div class="product-box-2">
     <a href="img/produtos/1-lightbox.jpg" class="lightbox"><img src="img/produtos/1.jpg" alt=""></a>
     <p class="legend">>> Vero mlkshk velit, freegan ullamco commodo put a bird on it cred synth kogi, Vero mlkshk velit, freegan ullamco commodo put a bird on it cred synth kogi.</p>
     <a href="img/produtos/1-lightbox.jpg" class="ampliar lightbox">clique para ampliar</a>
    </div>
    <div class="product-box-2">
     <a href="img/produtos/1-lightbox.jpg" class="lightbox"><img src="img/produtos/1.jpg" alt=""></a>
     <p class="legend">>> Vero mlkshk velit, freegan ullamco commodo put a bird on it cred synth kogi, Vero mlkshk velit, freegan ullamco commodo put a bird on it cred synth kogi.</p>
     <a href="img/produtos/1-lightbox.jpg" class="ampliar lightbox">clique para ampliar</a>
    </div>

そして何度もそれが必要です。次に、CSSを使用して「display：none」とJqueryを設定し、.legendに優れた効果を加えようとします。

    $('.product-box-2 a').mouseenter(
    function(){
    $('.legend').fadeIn();
});

$('.product-box-2').mouseleave(
    function(){
    $('.legend').fadeOut();
});

しかし、私は同じクラスを持っているので、.product-box-2 a ...の一部にマウスを置くと、すべての凡例が表示されます。.product-box内の.legendのみを選択する方法がわかりません。 -2私はそこにいます。

これが実際に動作しているのを見たい場合は、ここにあります！

4

3 に答える 3

2

内部セレクターのスコープを、イベントが発生した要素にコンテキストとして要素を与えることによって制限します。コンテキストを受け入れる署名については、ドキュメントを参照してください。

$('.product-box-2 a').mouseenter(
   function(){
    $('.legend',$(this).closest('div')).fadeIn();
});
$('.product-box-2').mouseleave(
    function(){
    $('.legend',this).fadeOut();
});
于 2012-05-09T23:42:03.320 に答える
2

あなたも試すことができ.children([Selector])ます

$('.product-box-2 a').mouseenter(
    function(){
    $(this).children('.legend').fadeIn();
});

$('.product-box-2').mouseleave(
    function(){
    $(this).children('.legend').fadeOut();
});

http://api.jquery.com/children/

于 2012-05-11T10:23:44.750 に答える
1

必要なのは

$(this).find('.legend').fadeIn();

この場合$(this)は、イベントをトリガーした要素を指し、.find()その子の間でのみ表示されます。

于 2012-05-09T23:42:53.290 に答える