Fatal编程技术网
  • javascript/
  • Javascript 鼠标指针工作不正常

Javascript 鼠标指针工作不正常

javascript jquery css

Javascript 鼠标指针工作不正常,javascript,jquery,css,Javascript,Jquery,Css,我尝试使用MousCenter显示一个类，如下所示： $(".stcommenttext").live({ mouseenter: function() { $(this).attr('class'); }, mouseleave: function() { } } ); 我的HTML和CSS如下所示： <div class="stcommentbody" id='stcommen

我尝试使用MousCenter显示一个类，如下所示：

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

$(".stcommentbody").hover(
    function() {
        $(this).find(".stcommentdelete").addClass('stcommentdelete-active');
    }, function() {
        $(this).find(".stcommentdelete").removeClass('stcommentdelete-active');
    }
);​
我希望它能在鼠标指针上为每个div显示我的删除图标，但它会为所有div显示图标。你知道我遗漏了什么吗？

从jQuery 1.7开始，
.live（）
方法已被弃用。见
$(".stcommenttext").on({
    mouseenter:
        function() {
            $(this).addClass('stcommentdelete');
        },
    mouseleave:
       function() {
            $(this).removeClass('stcommentdelete');
       }
});
您可以使用
.on（）
而不是
.live（）
或者像这样分别使用
.mouseover
和
mouseleave

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

从jQuery 1.7开始，
.live（）
方法已被弃用。见
您可以使用
.on（）
而不是
.live（）
或者像这样分别使用
.mouseover
和
mouseleave

$(".stcommenttext").mouseenter(function(){
   $(this).addClass('class');
}).mouseleave(function(){
   $(this).removeClass('class');
});
请参见您可以使用
.hover
以及
mouseenter
和
mouseleave
事件的多个功能，如下所示：

 <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>

$(".stcommentbody").hover(
    function() {
        $(this).find(".stcommentdelete").addClass('stcommentdelete-active');
    }, function() {
        $(this).find(".stcommentdelete").removeClass('stcommentdelete-active');
    }
);​
演示：（我使用了不同图像的精确标记）

您可以使用
.hover
以及
mouseenter
和
mouseleave
事件的多个功能，如下所示：

 <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>

$(".stcommentbody").hover(
    function() {
        $(this).find(".stcommentdelete").addClass('stcommentdelete-active');
    }, function() {
        $(this).find(".stcommentdelete").removeClass('stcommentdelete-active');
    }
);​
演示：（我对不同的图像使用了精确的标记）

当您悬停.stcommentbody元素时，是否要显示.stcommentdelete元素

$('.stcommentbody').hover(function() {
    $(this).find('.stcommentdelete').show();
}, function() {
    $(this).find('.stcommentdelete').hide();
});
您想在悬停.stcommentbody元素时显示.stcommentdelete元素吗

$('.stcommentbody').hover(function() {
    $(this).find('.stcommentdelete').show();
}, function() {
    $(this).find('.stcommentdelete').hide();
});
您正在使用哪个版本的jquery。如果1.7+您应该在上使用
而不是
live
。这是实际代码吗？因为
$（this.attr（'class'）不执行任何操作。您说过“要显示一个类”。在哪里显示一个类？这行代码
$（This.attr（'class'）不会做任何事情…我想那是我的问题。我正在尝试切换.stcommentdelete classdisplay属性的显示属性？你是说显示CSS属性吗？那么，当单击外部的.stcommenttext时，您想切换.stcommentdelete吗？不，我想在使用stCommentBody时显示删除图标，您使用的是哪个版本的jquery。如果1.7+您应该在
上使用
而不是
live
。这是实际代码吗？因为
$（this.attr（'class'）不执行任何操作。您说过“要显示一个类”。在哪里显示一个类？这行代码
$（This.attr（'class'）不会做任何事情…我想那是我的问题。我正在尝试切换.stcommentdelete classdisplay属性的显示属性？你是说显示CSS属性吗？那么，您想在单击外部.stcommenttext时切换.stcommentdelete吗？不，我想在使用stcommentbody时显示删除图标