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>

很多次都需要它。然后我尝试在 .legend 上添加一个很好的效果，使用 CSS 设置“display:none”和 Jquery：

    $('.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 回答