jQuery選擇元素裏面的其他div，但不是其他人

Question

我有四個文本框都具有類似的代碼。懸停中的每一個都會淡出，並通過CSS3轉換在其後顯示圖像。但隨着盒子的標題，我需要同樣的東西出現，所以我寫了一小塊代碼來做到這一點。我無法解決的唯一問題是讓懸停標題效果僅適用於其合作伙伴<section>合作伙伴。我知道我可以編寫4個不同的代碼塊，每個代碼塊都有不同的類，但這很煩人，如果我不需要，我寧願不要。

我的HTML：

<section class="home-text-box services" > 
    <div class="txt-box-title"> 
     <h2 class="align-left"> 
      <a class="txtbox-link" href="<?php bloginfo('url'); ?>/services" class="txt-box font-droid" title="Services" alt="Services" >What We Offer</a> 
     </h2> 
    </div> 

    <a href="<?php bloginfo('url'); ?>/services" ><div class="services-img"></div></a> 
    <a class="txtbox-img txtbox-main-img" href="<?php bloginfo('url'); ?>/services" > <?php the_post_thumbnail('txt-box'); ?> </a> 

</section> 

懸停在圖片我得到的淡出效果我正在尋找時，CSS部分是偉大的工作。現在，我只想在懸停在<txt-box-title><a>標記上時選擇<a>標記的「txtbox-main-img」類。

我的jQuery顯然選擇了所有的框，因爲它們具有相同的類。但是，如果我不需要，我寧願不寫4個不同的懸停代碼。

我的jQuery

$('.txtbox-link').hover(function(){ 
    $('.txtbox-main-img').css('opacity' , '0.0'); 
},function(){ 
    $('.txtbox-main-img').removeAttr("style"); 
}); 

我的情況下，CSS需要它：

.txtbox-main-img { 
    z-index: 10; 
    opacity: 100; 
    transition: opacity 0.25s linear; 
    -moz-transition: opacity 0.25s linear; 
    -webkit-transition: opacity 0.25s linear; 
    -o-transition: opacity 0.25s linear; 
} 

.txtbox-main-img:hover { 
    opacity: .01; 
    transition: opacity 0.25s linear; 
    -moz-transition: opacity 0.25s linear; 
    -webkit-transition: opacity 0.25s linear; 
    -o-transition: opacity 0.25s linear; 
} 

div.services-img { 
    position: absolute; 
    background: url('images/services-img.jpg'); 
    width: 200px; 
    height: 122px; 
    top: -1px; 
z-index: -10; 
} 

Answer 1

嘗試使用以下：假設

$('.txt-box-title').hover(function(){ 
    $(this).siblings('.txtbox-main-img').css('opacity' , '0.0'); 
},function(){ 
    $(this).siblings('.txtbox-main-img').removeAttr("style"); 
}); 

上述工程你想要p執行與您在.txtbox-main-img元素上的hover()代碼中發佈的相同操作，同時將鼠標懸停在.txt-box-title元素上。

我建議，雖然，而不是直接操縱元素的style，你添加和刪除，一個類來操作演示：

$('.txt-box-title').hover(function(){ 
    $(this).siblings('.txtbox-main-img').addClass('faded'); 
},function(){ 
    $(this).siblings('.txtbox-main-img').removeClass('faded'); 
}); 

而且在定義褪色類的CSS：

.faded { 
    opacity: 0; 
} 

參考文獻：

• addclass()。
• removeClass()。
• siblings()