Replace cursor with image when hovering over background 1

Question

I am trying to show a png instead of my cursor for stage 1 of my website. The background image transitions are in jQuery and the rest in PHP, CSS, HTML. I researched and used a code that everyone seems to use but the cursor won't show up. I checked if the naming of the image is correct and the path. Inspect element on Chrome shows no errors either. Let me know if you can find the mistake...

The cursor should appear with the first background only ("top"). Any tips highly appreciated!

CSS:

.top {
     position: absolute;
     top: 0px;
     bottom: 0px;
     left: 0px;
     right: 0px;
     z-index: 100;
     width: 100%;
}

.top: hover {
    cursor: url("images/cursorcamera.png");

jQuery

$(document).ready(function(){
    var audioElement = document.createElement('audio');
    audioElement.setAttribute('src', 'audio/camera.wav');

    $('*').click(function(){
        audioElement.play();
        $('.top').fadeOut('slow')

       // $('.second').fadeOut('slow').delay(1000);
        $('.second').delay(5000).fadeOut();
        $('#counter').delay(5000).fadeOut();
   });
});

Answer 1

Dont use hover. Declare the curser url in your top css Element and it will work when you hover over the Element with your mouse.

Answer 2

I tried this and the pointer shows up, not the image...so it works somehow just not the image...
.top { position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; z-index: 100; width: 100%; cursor: url(images/cursorcamera.png), pointer; }