2

How remove the Zoom class hover state after ajax response. I use the $("#element").removeClass("zoom") but this is not work it remove the whole class. I want to remove only hover satae of class.

CSS code

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

<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>
Pentux
  • 396
  • 3
  • 13
Ashvin Ade
  • 47
  • 7
  • Why using CSS pseudo class `:hover` while you seem not to be using it? I mean why not just toggling a class? – A. Wolff Dec 21 '17 at 15:17
  • Is repeated, you have a solution [here](https://stackoverflow.com/a/2769609/3540693) – Pentux Dec 21 '17 at 15:19

1 Answers1

1

Define a zoom-no-hover class in your CSS: 

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

Then use jquery to remove the zoom class and add a zoom-no-hover class instead: 

<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>
DemetriOS
  • 161
  • 13