Is there a way to have my MUI Typography component display a unique image cursor when hovered over?

After some testing, I found that setting the cursor to cursor: pointer works perfectly fine. However, my goal is to use a custom image as a cursor. The image is saved in both my src and public folders, but I seem to be struggling with the syntax when using 

"url(JavaScript-logo.png)"

import logo from "../assets/logo1.png";
...
  <Typography
        sx={{
          "&:hover": { cursor: `url(${logo}), auto` },
        }}
      >
        ["JavaScript",
  </Typography>

I have also attempted to implement this without using &:hover, as well as without including auto

javascriptcssreactjsmaterial-ui

Answer №1

It seems like there is an issue with your image that needs addressing. Below is a sample code snippet similar to yours that I used and it worked successfully. In this code, I made sure to include a properly-sized svg, but you can also replace it with a png if needed.

return (
    <div className="App">
      <header className="App-header">
        <Typography
          variant="h4"
          sx={{
            "&:hover": {
              cursor: `url(${CustomCursor}), pointer`,
            },
          }}
        >
          JavaScript
        </Typography>
      </header>
    </div>

Check out the SAMPLE DEMO

Answer №2

After some troubleshooting, I discovered the problem: the image dimensions I had originally set were too big. By resizing the dimensions, I was able to resolve the issue and now everything is functioning perfectly.

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

Is it possible to combine several m3u8 files into a single m3u8 file?

I am looking to consolidate multiple m3u8 files into a single file for seamless playback in one video player. How can I achieve this without compromising the individual clips? For instance, if I have zebra.m3u8, giraffe.m3u8, and lion.m3u8 files, is it pos ...

javascripthtmlhttp-live-streaminghls.js

Steps for positioning a play button at the center of all images

index.html - here is the index.html file code containing all the necessary html code <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width ...

htmlcssflexboxcss-selectors

Adding JSON information into a .js file using ajax technology

I am currently working on integrating a calendar template into my system. In the demo JavaScript file, example events are structured like this: events: [ { id: 1, title: 'Title 1', start: ('2016-01-02'), ...

javascriptphpjqueryjsonajax

How can you efficiently pass multiple JSON files as arguments for Observable Arrays, especially when the values from one file are required for use in another file?

My goal is to utilize $.getJSON to retrieve data from two JSON files and assign their values to observableArrays. Currently, I have hard-coded the JSON data into the observableArray. You can view an example on this JSFiddle link. This was my initial appro ...

javascriptjqueryjsonknockout.jsknockout-2.0

Tips for arranging the Radio button, AutoComplete, and Input Base in a single row

I need assistance with formatting my code to display "Watch Movie Yes I agree" in one line. How can I achieve this layout? Visit this link for the code <Box padding={1}> <FormControl> <RadioGroup> <FormControlL ...

reactjsflexboxmaterial-uigridstyles

Can you explain the functionality of the DataTable drawCallback feature?

I'm currently facing an issue where CSS is not being applied to all cells in a DataTable based on their values when using drawCallback(). While the CSS gets applied to some cells, it's inconsistent. You can check out the JsFiddle of my problem he ...

javascriptjquerydatatablesdatatables-1.10

What is the best way to add flair to the HTML <title> tag?

Just a quick question - I'm wondering if there is a method to apply CSS styles to an HTML element. Here's an example declaration: title { color: red; font-family: 'Roboto', sans-serif; } ...

htmlcsstitle

Adjusting the timeout for a particular operation according to its unique identifier

I am looking for a solution to call a method that posts an answer after an input change in my Angular project. I want to reset the timeout if another input change occurs to avoid multiple posts. Is there a smart way to achieve this? My project involves po ...

javascriptangulartypescript

Utilizing Vuex state within Vue-Router route definitions

My Vuex store setup in main.js looks like this: import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) //initialize the store const store = new Vuex.Store({ state: { globalError: '', user: { ...

javascriptvue.jsvuejs2vue-routervuex

Experiencing a glitch with the Realtime Database feature on Firebase

// db.js file import * as firebase from "firebase/app" import "firebase/database" const config = { apiKey: "" ... } const db = firebase.initializeApp(config) export default db // App.vue ...

javascriptfirebasevue.jsfirebase-realtime-database

Tips for customizing the appearance of Java FX TableView column headers with CSS

I am relatively new to JavaFX and delving into CSS stylesheets, as well as using stackoverflow. I am curious about how one can customize the styling of a table column header. This is what my current column header looks like: Current appearance of my table ...

cssjavafxtableviewcolumnheader

formula for an arbitrary velocity vector

In the game I'm developing, I want the ball to move in a random direction on the HTML canvas when it starts, but always with the same velocity. The current code I have is: vx = Math.floor(Math.random() * 20) vy = Math.floor(Math.random() * 20) Howev ...

javascripthtmlphysics

Tips for Embedding External JavaScript and URLs in Joomla Protostar Template

I'm interested in incorporating a hamburger menu into my Joomla protostar template, similar to the one featured on this URL: ['https://codepen.io/PaulVanO/pen/GgGeyE'] This will provide me with a fullscreen hamburger menu for both desktop ...

javascriptphpjquerycssjoomla

What is the method for determining the type of search results returned by Algolia?

My connection between firestore and algoliasearch is working well. I am implementing it with the help of typescript in nextjs. I am attempting to fetch the results using the following code snippet products = index.search(name).then(({hits}) => { ret ...

reactjstypescriptfull-text-searchnext.jsalgolia

The jQuery script operates just one time

Recently, I encountered a small issue with my script. It only seems to work once - after that, I have to refresh the page in order to remove a favorite article (which the script is supposed to do). $("a.fav_no").on('click', function () { ...

javascriptjqueryjquery-load

Trigger SocketIO message when the page is closed or when the user confirms leaving the page with on

My server application is responsible for executing firmware updates on remote devices using radio communication. Occasionally, the update process may drag on indefinitely due to disruptions in the radio network. If this happens, users might want to interr ...

javascriptnode.jssocket.io

Issue with Internet Explorer 7: Floating elements are incorrectly positioned below their intended placement

Upon visiting using IE7, you may notice that the two middle columns are being pushed down to the bottom of the page. I have attempted to resolve this issue by applying display:inline to both columns without success. Any assistance on this matter would be ...

cssinternet-explorer-7

Continue to alter elements by stacking them on top of each other

Currently, I am in the process of familiarizing myself with CSS3 3D transforms. However, I am encountering difficulties in keeping elements that are undergoing transformation on top of other elements. If you'd like to take a look at what I have accom ...

jqueryjquery-uicssz-indextransform

Troubleshooting SDK Integration with Axeptio in Nuxt3

I am currently developing a Nuxt3 project and I'm looking to integrate a script provided by Axeptio, a cookie platform. To achieve this integration, I created a custom plugin in Nuxt3. export default defineNuxtPlugin((useNuxtApp) => { ;(<any ...

javascriptvue.jssdknuxt.jsnuxt3.js

Ways to delete a header from the req object in Express

Can anyone help me understand how to remove a header from the req object in Express? I've heard that using res.disable("Header Name") can do this for the res object, but it doesn't seem to work for req.headers. ...

javascriptnode.jsexpress