0

私は次のように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のmouseenter時に削除アイコンが表示されると思いますが、すべての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().mouseover.mouseleave

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

mouseenterを参照してください

于 2012-09-19T14:57:31.550 に答える
0

次のように、イベント.hoverの複数の関数で使用できます。mouseentermouseleave

$(".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 に答える