jQuery，請只操作這個DIV？ （當懸停...）（有示範）

Question

http://jsfiddle.net/5MwVg/

看這個PLS ...

當我徘徊冠軍，我需要顯示的小圖片，只有一個...

Answer 1

您有重複的ID 「後箱」 您HTML。你應該改變他們上課。我這樣做，改變你的JavaScript，只顯示在「後箱」你徘徊在標題畫面

http://jsfiddle.net/5MwVg/13/

Answer 2

我認爲你必須使用id來選擇項目，而不是使用類。

Answer 3

到這裏看看：http://jsfiddle.net/7YPdR/

我認爲這是你在找什麼：顯示的星星只適用於單個圖像的類。

的關鍵是在這條線的位置：

$(this).parent().parent().find(".readthis").addClass("readthis-hover", 1, callback); 

您需要向後搜索在DOM先找到主容器，然後readthis」類添加到適當的對象

Answer 4

如何這個....

現場演示：http://jsfiddle.net/5MwVg/9/

個HTML

<div id="post-wrapper"> 
    <div id="post-box"> 
     <a class="readthis" href="#"><img src="http://www.filmsys.com/images/star-icon.gif"></a> 
     <img src="http://www.google.com/intl/en_ALL/images/srpr/logo1w.png" /> 
     <article> 
      <h2 class="entry-title"><a href="#">Featured Post Area</a></h2> 
      <div class="entry-content"> 
       <p>Consectetuer adipiscing elit.</p> 
      </div>  
     </article> 
    </div> <!-- #post-box-## --> 
    <div id="post-box"> 
     <a class="readthis" href="#"><img src="http://www.filmsys.com/images/star-icon.gif"></a> 
     <img src="http://www.google.com/intl/en_ALL/images/srpr/logo1w.png" /> 
     <article> 
      <h2 class="entry-title"><a href="#">Featured Post Area</a></h2> 
      <div class="entry-content"> 
       <p>Consectetuer adipiscing elit.</p> 
      </div>  
     </article> 
    </div> <!-- #post-box-## --> 
</div><!-- #post-wrapper --> 

JS

$(document).ready(function() { 
    $(".entry-title").hover(function() { 
     var that=$(this).parent().parent().find(".readthis"); 
     that.addClass("readthis-hover", 1, function(){ 
      setTimeout(function() { 
       that.removeClass("readthis-hover" , 1); 
      }, 2000);    
     }); 
     return false; 
    },function(){//Do Nothing on mouseout}); 
}); 

簡單的JS不定時（DEMO）http://jsfiddle.net/5MwVg/12/

$(document).ready(function() { 
    var item = $(this).parent().parent().find(".readthis"); 
    $(".entry-title").hover(function() { 
     item.addClass("readthis-hover"); 
    },function(){ 
     item.removeClass("readthis-hover"); 
    }); 
});