jQuery，这个DIV只做动作吗？ （当悬停时......）（带演示）

Question

http://jsfiddle.net/5MwVg/

看看这个......

当我悬停标题时，我需要只显示一张小图片......

Answer 1

看看这里：http://jsfiddle.net/7YPdR/

我认为这正是您所寻找的：显示星星的类仅适用于单个图像。

关键在这一行：

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

您需要在DOM中向后搜索以首先找到主容器，然后将readthis“类添加到适当的对象。

Answer 2

这个怎么样....

现场演示： 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");
    });
});

Answer 3

我认为您必须使用id来选择项目，而不是使用类。

Answer 4

您的HTML中有重复的“post-box”ID。你应该把它们改成课堂。我这样做了，并改变了你的JavaScript，只显示你在徘徊在标题中的“邮箱”中的图片。

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