如何在AJAX响应后删除类的悬停状态

Posted 2021-04-16

如何在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>

答案

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