jquery - 如何在AJAX响应后移除类的悬停状态

Question

如何在ajax响应后删除Zoom类悬停状态。我使用 $("#element").removeClass("zoom") 但这不起作用，它会删除整个类。我只想删除类的悬停 satae。

CSS代码

<style type="text/css">
    .zoom
    { 
        -moz-transition: all 2s;
        -webkit-transition: all 2s;
        transition: all 2s;
    }
    .zoom:hover 
    {
            -moz-transform: scale(3);
            -webkit-transform: scale(3);
            transform: scale(3);
    }
    .blur 
    {
        -webkit-filter: blur(5px); /* Safari 6.0 - 9.0 */
        filter: blur(5px);
    }
</style>

JS代码

<script type="text/javascript">
    $(document).ready(function($) 
    {

        $("#street-display").click(function()
        {
            $("#street-display").addClass('zoom');

            var value=$('#street-display').attr('src');
            var imgsplit=value.split('/');
            var actimgname=imgsplit[1].split('.');
            var nextimageapper=parseInt(actimgname[0])+parseInt(1);

            $.ajax({
                url: 'street_change.php',
                type: 'POST',
                data: {param1: nextimageapper},
            })
            .done(function(resp) {
                $('#street-display').attr('src','street_images/'+resp);                     
            })
            .fail(function() {
                console.log("error");
            })
            .always(function() {
                console.log("complete");                    
            });
        });
    });
</script>

Answer 1

在 CSS 中定义 zoom-no-hover 类:

<style type="text/css">
    .zoom,
    .zoom-no-hover
    { 
        -moz-transition: all 2s;
        -webkit-transition: all 2s;
        transition: all 2s;
    }
    .zoom:hover 
    {
            -moz-transform: scale(3);
            -webkit-transform: scale(3);
            transform: scale(3);
    }
    .blur 
    {
        -webkit-filter: blur(5px); /* Safari 6.0 - 9.0 */
        filter: blur(5px);
    }
</style>

然后使用 jquery 删除 zoom 类并添加 zoom-no-hover 类:

<script type="text/javascript">
    $(document).ready(function($) 
    {

        $("#street-display").click(function()
        {
            $("#street-display").addClass('zoom');

            var value=$('#street-display').attr('src');
            var imgsplit=value.split('/');
            var actimgname=imgsplit[1].split('.');
            var nextimageapper=parseInt(actimgname[0])+parseInt(1);

            $.ajax({
                url: 'street_change.php',
                type: 'POST',
                data: {param1: nextimageapper},
            })
            .done(function(resp) {
                $('#street-display').attr('src','street_images/'+resp);
                $(".zoom").addClass("zoom-no-hover") ;
                $(".zoom").removeClass("zoom") ;  
            })
            .fail(function() {
                console.log("error");
            })
            .always(function() {
                console.log("complete");                    
            });
        });
    });
</script>