Question

我正在尝试使用mousenter来显示一个类：

$(".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);
}

我希望它能在mouseenter上显示我的删除图标，但是它会显示所有div的图标。知道我错过了什么吗？

Answer 1

$(".stcommenttext").on({
    mouseenter:
        function() {
            $(this).addClass('stcommentdelete');
        },
    mouseleave:
       function() {
            $(this).removeClass('stcommentdelete');
       }
});

Answer 2

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

$('.stcommentbody').hover(function() {
    $(this).find('.stcommentdelete').show();
}, function() {
    $(this).find('.stcommentdelete').hide();
});

Answer 3

从jQuery 1.7开始，不推荐使用.live()方法。见live
您可以使用.on()代替.live()，也可以分别使用.mouseover和.mouseleave。

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

请参阅mouseenter

Answer 4

您可以对.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/（我使用不同图像的确切标记）

mouseenter无法正常工作

4 个答案: