AJAX响应后如何去除类的悬停状态答案

【问题标题】：How to remove the hover state of class after AJAX responseAJAX响应后如何去除类的悬停状态
【发布时间】：2017-12-21 15:06:03
【问题描述】：

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

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 伪类 :hover 而您似乎没有使用它？我的意思是为什么不只是切换一个类？
重复了，你有办法here

标签： jquery tags hover

【解决方案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>

【讨论】：