的mouseenter工作不正常

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); 
} 

我希望它能顯示我的刪除圖標，當鼠標爲單獨的div，但它顯示所有div的圖標。任何想法我失蹤？

Answer 1

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

Answer 2

從jQuery 1.7開始，不推薦使用.live()方法。請參閱live
您可以使用.on()而不是.live()或分別使用.mouseover和.mouseleave。

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

看mouseenter

Answer 3

您可以使用.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/（我用了你與不同的圖像精確標記）

Answer 4

當您將.stcomme懸停時，您想要顯示.stcommentdelete元素ntbody元素？

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