AJAX 응답 후 클래스의 호버 상태를 제거하는 방법

Question

아약스 응답 후 줌 클래스 호버 상태를 제거하는 방법. 나는 $ ("# 요소") 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> 

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를 사용클래스를 추가하고 대신 클래스를 추가하십시오.

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