Cursor customized image vanishes upon clicking anywhere on the page on a MAC in various web browsers

I am currently trying to set a custom image as the cursor using jQuery in this manner

$(document).ready(function(){
      $("body").css('cursor','url(http://affordable-glass.com/test/penguinSm.png),auto');
});

While this method works, there are some issues that I have encountered:

  1. Performing quick and sharp movements with the mouse can sometimes cause the cursor to revert back to a non-image cursor. The easiest way to replicate this is by moving the pointer in small quick circles. (this behavior is a bit odd but manageable)
  2. Clicking anywhere causes the cursor to switch back to a non-image cursor (this is the primary issue)

You can view a demonstration of the problem in this jsfiddle link

I also attempted to achieve the same result using CSS directly, but encountered the same issues.

div{
    cursor: url(http://affordable-glass.com/test/penguinSm.png),auto;
}

You can view the CSS implementation in this CSS Jsfiddle link

I tested the behavior on different systems, and consistently experienced the same results:

  • Windows, using Chrome Version 39.0.2171.95 m (running in virtualBox on my mac)
  • Mac, using Chrome Version 39.0.2171.95 (64-bit)
  • Mac, Firefox version 34.0.5
  • On an actual Windows PC running Chrome Version 39.0.2171.95 m, the issue does not occur

It appears that this may be a machine-specific issue?

Here are the specifications of my system:

Answer №1

It seems that the issue was related to a glitch in Microsoft Word or one of its add-ons on my Mac. The problem only persisted when Word was open, but closing the program resolved it. After restarting my Mac, I am no longer experiencing the same issue, suggesting that it was just a temporary bug. Grateful for everyone's assistance in troubleshooting!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Successfully bypassed Captcha by using inspect element

Currently, I have integrated Google Captcha on my login page. However, upon inspecting the elements, I noticed that the Captcha element is visible in the source code. This allows me to delete the element, essentially removing the Captcha checkbox and byp ...

What is the best way to remove query string parameters prior to running a function when a button is clicked?

I'm facing an issue trying to implement a button that filters events based on their tags. The problem arises when the tag value in the query string parameter does not clear when other buttons are clicked. Instead, the new filter tag value adds up with ...

Load the jQuery script only in the absence of cookies

Hey there! I have a cool fade out effect on a website I'm working on. When you go to the site, a div containing the title of the site appears and then fades away after a while. It's pretty simple yet effective. <div class="loader"><h1&g ...

Stop scrolling on the body of the webpage

I am struggling to find a solution to completely disable scrolling on the HTML body. I have experimented with different options, but none seem to work as desired: overflow: hidden; did not disable scrolling, only hid the scrollbar. position: fixed; w ...

guidance on targeting a particular form using jquery2

Is there a way for my JavaScript to reference a specific form out of multiple forms that were submitted? <form method="post" action="#" > <textarea name="text"></textarea> <button href="#" data-ref="<?PHP echo $chatID ?&g ...

verifying the presence of a string or value within an array

I'm currently working on a feature that involves adding an element to an array by typing something into a text field and clicking a button. I've also implemented an if statement to check if the input already exists in the table, and show an alert ...

Using Phonegap to connect to MySQL Database

I am exploring the use of PhoneGap (Cordova3) and my goal is to create a screen that instantly pulls data from MySQL when it loads, allowing users to click on the results to navigate to another page with more details. Do I need to implement jQuery for thi ...

Is there a way to dynamically calculate the total of a column when a new row is added using Javascript?

I am new to both javascript and cakephp. I successfully implemented a feature that allows me to add a new row using javascript, but now I am looking to calculate the total sum of the "amount" column whenever I input a value in the amount field. Below is th ...

jQuery Function malfunctioning after initial click

I have developed a function that plays and pauses music. It is designed to be simple and lightweight for small audio samples, with basic play and stop functionalities. The issue I'm encountering is that after playing the music for the second time, the ...

Is there a way to dynamically include an attribute using VueJS?

Is there a way in Vue to dynamically add an attribute, not just the value of an attribute using v-bind? I am aware that I can set a value to an attribute dynamically with v-bind, but I would like to add the attribute itself based on a condition. Something ...

What is the best way to align a div to the bottom of a table cell?

I need help with positioning a div inside a table cell that has 100% height. How can I align this div to the bottom of the cell? Furthermore, there are other divs within the same cell that I would like to position in the middle and at the top. ...

Customize Material UI components by incorporating SASS classes

Currently, I am using Material UI components but I want to streamline my styles by moving them all into a .scss file. Right now, I have a significant styles object within the same JavaScript file where I am utilizing the Material UI components. This styles ...

"Implementing a Jquery event to handle the closing of a select

Is there a way for me to detect when the select tag is closed by clicking on the screen elsewhere? I can easily hook into the change event of the select fine, which will close the select. However, other methods such as body click, body focus, select blur, ...

Issues with JavaScript causing slideshow to malfunction

I'm experiencing some issues with my image slider. It seems that during the initial loop, the slideshow keeps reverting back to 'image3'. However, after the first loop, everything appears to work correctly. I am looking for a solution to ens ...

Why does the scrollbar appear even when the inner element is smaller in CSS transformation?

Please check out this link .wrapper { width: 200px; height: 200px; padding: 10px; border: 1px solid #888; overflow: auto; } .scale { width: 400px; height: 300px; background-color: red; transform: scale(0.4); transform-origin: 0 0; transitio ...

Aligning a element at the center is not functioning properly when using margin: 0 auto;

I'm having trouble aligning elements to the center when applying margin: 0 auto. You can view the code here: https://jsfiddle.net/helloworld123/vhhx1o7n/ The goal is to align the elements in the center of the page (.entry-wrap should be centered) and ...

The functionality to disable and reenable a button after performing a calculation is not functioning properly in the code

Here's the issue I'm facing with my code: When I click the search button, a for loop prints "hi" 5000 times. Before this loop starts, I want to disable the button. However, after the console.log is done, the button should be enabled again. But fo ...

When the window size is reduced (smaller than a page width), the layout of the page becomes distorted

Check out my cool header: <head> <link href="/css/header.css" rel="stylesheet" type="text/css"> </head> <body> <div id="background"><img src="/multi/background.jpg" width="100%" height="100%" alt=""&g ...

When the form is submitted, delete the file and its corresponding record

Currently, I have a form that deletes a record from my MySQL database. The database stores the image/file name. I am looking to enhance the statement so that it also removes the file in the website directory with the corresponding image/file name. If bot ...

Hide offcanvas menu upon clicking on anchor links

Issue arose when the offcanvas menu remained open after clicking an anchor link. To resolve this, I implemented the following code for an onclick event: function close_offcanvas() { var element1 = document.getElementById("eff_nav_toggler&q ...