CSS mouse won't move outside of browser window

Question

I replaced the mouse pointer with a CSS element to add some neat effects. the mouse pointer only works within the browser window. If I move the mouse to the addressbar or the task bar, the mouse returns to the normal pointer.

How do I carry the pointer styling into the address bars/taskbars areas while the browser window is open?

For reference, here's my pointer code: http://jsfiddle.net/ckmeans/s29eywjd/8/

var TimeoutID;

function inputdetect() {
  // attaches event handler to specified event
  // takes event as string, function to run, and optional boolean
  // to indicate when the event propogates
  // these are false, so events "bubble up"
  this.addEventListener("mousemove", resetTimer, false);
  this.addEventListener("mousedown", resetTimer, false);
  this.addEventListener("mousewheel", resetTimer, false);
  this.addEventListener("keypress", resetTimer, false);
  this.addEventListener("touchmove", resetTimer, false);
  this.addEventListener("DOMmousescroll", resetTimer, false);
  this.addEventListener("MSpointermove", resetTimer, false);

  startTimer();
}

inputdetect();

function startTimer() {
  //waits two seconds before calling inactive
  TimeoutID = window.setTimeout(goInactive, 2000); // does it need to take the window variable??

}

function resetTimer(e) {
  window.clearTimeout(TimeoutID);
  goActive();

}

function goActive() {

  //what happens when the UI is not idle

  $('p').text("The UI is not idle.");
  $('.cursory').css("background-color", "green");

  $('.pulse').css('visibility', 'hidden');
  $('.pulse').removeClass('pulseanim');
  startTimer();
}

function goInactive() {

  $('p').text("The UI is idle.");
  // REPLACING CURSOR WHEN UI IS IDLE
  //this part won't work
  $('.cursory').css("background-color", "red");
  $('.pulse').css('visibility', 'visible');
  $('.pulse').addClass('pulseanim');


}

// THIS changes the pointer to a css element
$(document).ready(function() {

  $(document).on('mousemove', function(e) {
    $('.cursory').css({
      left: e.pageX,
      top: e.pageY
    });


  });


});

html {
  cursor: none;
}
.cursory {
  height: 10px;
  width: 10px;
  border-radius: 100%;
  margin: 0px;
  padding: 5px;
  background-color: green;
  background-clip: content-box;
  position: fixed;
}
.pulse {
  border: 3px solid blue;
  border-radius: 100%;
  -webkit-border-radius: 30px;
  height: 10px;
  width: 10px;
  position: absolute;
  z-index: -1;
  left: 2px;
  top: 2px;
  /*-webkit-animation: pulsate 1s ease-out;
    	-webkit-animation-iteration-count: infinite; 
    	opacity: 0.0*/
}
@-webkit-keyframes pulsate {
  0% {
    -webkit-transform: scale(0.1, 0.1);
    opacity: 0.0;
  }
  50% {
    opacity: 1.0;
  }
  100% {
    -webkit-transform: scale(3.2, 3.2);
    opacity: 0.0;
  }
}
.pulseanim {
  -webkit-animation: pulsate 1s ease-out;
  -webkit-animation-iteration-count: infinite;
  opacity: 0.0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<div class="cursory">
  <div class="pulse"></div>
</div>
<!--this is where the HTML will go*/-->
<p>hello</p>

Answer 1

You can't, the content outside of the browser window can't be modified from within the window.