Search code examples
javascriptjquerycursor

change cursor property with javascript

i have coded a simple javascipt that when the user clicks sth, to do some stuff. I also want that the cursor to be changed, so i added this

<script>
    $(document).ready(function() {            
        $(".targetClass").click(function () {
            $('#loaderImage').show();
            //this is the line i add
            $('.container').css('cursor','wait');                
        });
    });
</script>

And it works. But if i take the cursor on a link the cursor will change again to "pointer" value. What i have to do so the cursor, after the click remain to wait value (even i put it on any element of the page)? Thx!!

Solution

  • Every element within the container will overwrite the cursor wait with it's default behaviour. You would have to set cursor wait to all elements.

    $('*').css('cursor','wait');

    You can use:

    $('*').css('cursor','auto');

    to set everything to default again.

    Or possibly better:

    $('*').css('cursor','');

    to reset to the previous cursor state, therefore not overriding other cursor changes.