0

我正在尝试使用 mouseenter 显示一个类，如下所示：

$(".stcommenttext").live({
    mouseenter:
        function() {
            $(this).attr('class');
        },
    mouseleave:
       function() {
       }
   }
);

我的 HTML 和 CSS 如下所示：

 <div class="stcommentbody" id='stcommentbody19'>

        <div class="stcommentimg">
            <a href="/view_profile.php?id=5" style="border:0;"><img src="/photos/files/5/main/small_thumb.jpg?v=1348065832" class='small_face'/></a>
        </div>

        <div class="stcommenttext">
            <input type="hidden" id="home19" value="1" />
            <a class="stcommentdelete" href="#" id="cmt_19" rel="tooltip" title="Delete Comment"></a>                    
            <a href="/view_profile.php?id=5" style="border:0;"><b>psmith</b></a>  hello             <div class="stcommenttime">8 minutes ago <span style="float:right;"><img id="delcmticon_69" class="saving" src="/images/busy.gif" /></span></div> 
        </div>
    </div>
    <div class="stcommentbody" id='stcommentbody20'>

        <div class="stcommentimg">
            <a href="/view_profile.php?id=5" style="border:0;"><img src="/photos/files/5/main/small_thumb.jpg?v=1348065832" class='small_face'/></a>
        </div>

        <div class="stcommenttext">
            <input type="hidden" id="home20" value="1" />
            <a class="stcommentdelete" href="#" id="cmt_20" rel="tooltip" title="Delete Comment"></a>                    
            <a href="/view_profile.php?id=5" style="border:0;"><b>psmith</b></a>  testing this              <div class="stcommenttime">7 minutes ago <span style="float:right;"><img id="delcmticon_69" class="saving" src="/images/busy.gif" /></span></div> 
        </div>
    </div>
</div>

CSS：

.stcommentdelete {
    float:right;
    cursor:pointer;
    background:url(/wall/icons/trashdull.png);
    display: none;
    height:20px;
    width:20px;
}
.stbody:hover .stcommentdelete {
    display: block;
}
.stcommentdelete:hover {
    background:url(/wall/icons/trash.png);
}

我希望它会在鼠标输入时为单个 div 显示我的删除图标，但它会显示所有 div 的图标。知道我错过了什么吗？

4

4 回答 4

2 
$(".stcommenttext").on({
    mouseenter:
        function() {
            $(this).addClass('stcommentdelete');
        },
    mouseleave:
       function() {
            $(this).removeClass('stcommentdelete');
       }
});
于 2012-09-19T14:55:39.113 回答
1

您想在悬停 .stcommentbody 元素时显示 .stcommentdelete 元素吗？

$('.stcommentbody').hover(function() {
    $(this).find('.stcommentdelete').show();
}, function() {
    $(this).find('.stcommentdelete').hide();
});
于 2012-09-19T15:09:11.433 回答
0

从 jQuery 1.7 开始，该.live()方法已被弃用。现场观看
，您可以像这样使用.on()代替.live()或单独 使用.mouseoverand 。.mouseleave

$(".stcommenttext").mouseenter(function(){
   $(this).addClass('class');
}).mouseleave(function(){
   $(this).removeClass('class');
});

见mouseenter

于 2012-09-19T14:57:31.550 回答
0

您可以使用.hover多个函数mouseenter和mouseleave事件，如下所示：

$(".stcommentbody").hover(
    function() {
        $(this).find(".stcommentdelete").addClass('stcommentdelete-active');
    }, function() {
        $(this).find(".stcommentdelete").removeClass('stcommentdelete-active');
    }
);​

演示： http: //jsfiddle.net/SO_AMK/Vg2vZ/（我使用了不同图像的精确标记）

于 2012-09-19T15:00:37.523 回答