jQuery , Do action only this DIV ? (When hover...) (with Demo)

http://jsfiddle.net/5MwVg/

Look at this p开发者_高级运维ls...

When I hover title , i need to show the small pic only one...

Take a look here: http://jsfiddle.net/7YPdR/

I think it is what you're looking for: the class that displays the stars is only applied to a single image.

The key is on this line here:

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

You need to search backwards in the DOM to first find the main container and then add the readthis" class to the appropriate object.

How about this....

LIVE Demo: 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});
});

Simpler JS without Timer (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");
    });
});

You have duplicate ids "post-box" in your HTML. You should change them to class. I did that and changed your JavaScript to only show the picture in the "post-box" you're hovering the title in.

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

I think you have to work with id's to select items and not with classes.