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

Customizing input tags

Greetings everyone, I have encountered a dilemma : <input type ="file" name ="fileUpload"> I created a file input that shows "choose a file" by default. I'm not too fond of it and would like to make it look more like a button. However, when I ...

csshtmlinput

Unable to Show the Contents of the Item - AngularJS

I'm in the process of developing an application that will showcase job details within a modal window based on the selected template. To achieve this, I've integrated ui.bootstrap and ui.router. However, I'm encountering difficulties in displ ...

javascriptangularjsjsontwitter-bootstrapangular-ui-router

What is causing the failure of success function commands to be executed?

Currently, I am facing some inconsistencies between my locally hosted app on WAMP (working perfectly) and the deployed version of my app. In an attempt to resolve this issue, I am working with CodeIgniter and jQuery AJAX. As part of my troubleshooting proc ...

javascriptphpjqueryajaxcodeigniter

GetServerSideProps function yielding varied prop values

I'm currently exploring NextJS and delving into SSR. I've been struggling to grasp the functionality of getServerSideProps(). It seems that it should replace useState in order to be rendered on the backend, but I'm receiving different props ...

javascriptreactjsnext.jsserver-side-renderinggetserversideprops

What causes the div to not adjust to the browser window when the vertical size is decreased?

Imagine a basic HTML page like this: <doctype> <html> <head> <title>My Amazing Page</title> <script type="text/javascript" src="jquery-1.8.3.min.js"></script> </head&g ...

jqueryhtmlcssresize

Ensuring a radio button is pre-selected by default in React by passing in a prop

Assume I have a React function similar to this function Stars({handleStarClick, starClicked}) { if (starClicked === 3) { document.getElementById('star3').checked = true } return ( <div className="rate"> ...

javascriptreactjscomponentsradio-button

Unable to extract the 'data' property from an undefined source in React, causing an error

I encountered this error message: TypeError: Cannot destructure property 'data' of '(intermediate value)' as it is undefined. export const getServerSideProps: GetServerSideProps = async () => { // categories const { data: categor ...

reactjstypescriptnext.js

Encountered an error in React Js where the property 'params' is undefined and cannot be read

Currently in the process of creating an app similar to Instagram, I've encountered a challenge where I'm experiencing the following issue: "Uncaught (in promise) TypeError: Cannot read property 'params' of undefined" I have anothe ...

reactjsreact-nativereact-reduxreact-router

Setting up your configuration for create-react-app once you have ejected to start building your very own component library

As I embarked on creating a component library to publish on NPM and reuse in various apps, I decided to start by developing a React app with the help of create-react-app. However, it quickly became apparent that the default configuration of create-react-ap ...

reactjsnpmwebpackcreate-react-app

Using HTML as an argument in a JavaScript function

Within a variable, I have stored an entire HTML page. $body = $myhtmlpage; <a onclick="openWin('<?php echo htmlspecialchars(json_encode($body)) ?>');" href="javascript:void(0);"> Click </a> I also have this JavaScript functio ...

phpjavascripthtml

React Router Error: Hook call invalid. Remember to only use hooks inside the body of a function component

I am having an issue with my React app that uses react router. In Box.js, I am attempting to access the URL parameters but I am encountering the following error message: Invalid hook call. Hooks can only be called inside of the body of a function component ...

javascriptreactjs

Displaying a constant variable in JSX after submitting a form

Exploring Next.js further, I've set out to create a website that functions similar to Tinyurl by shortening long URLs. However, I've hit a roadblock when it comes to displaying the shortened URL. My approach involves using a form where submitting ...

reactjsnext.jsformikyup

Manipulating Angular and Typescript to utilize the method's parameter value as a JavaScript object's value

I am currently working with Ionic, Angular, and Typescript, attempting to dynamically set the value of a location based on the parameter passed from a method. Here is the relevant code snippet: async fileWrite(location) { try { const result = a ...

javascriptangulartypescriptionic-frameworkcapacitor

Guide to creating a functional Async API

I am currently facing a challenge while developing an application for my institution. I need to allow users to access database information (currently using firebase) from an external server, so I set up a node.js server to facilitate communication and hand ...

javascriptnode.jsexpressfirebasefirebase-realtime-database

What is the best way to link JavaScript files from a Grails plugin in a separate Grails application?

I have developed a unique plugin that offers multiple Grails controllers and domain objects. Additionally, I have created several AngularJS UI components that I wish to utilize in various other projects. These specific files are located within the web-app ...

javascriptangularjsgrailsgspgrails-resources-plugin

Leveraging custom hooks within a callback function

When trying to make an API request for cities data using the provided input, I encountered an error stating React Hook "useData" is called in function "handleCityInput" that is neither a React function component //handling city input const handleCityIn ...

reactjs

Calculating the size of grid thumbnails or items using the calc() function

I am currently working on building a responsive portfolio grid that spans the full width of the screen. To achieve this, I have set the width of the items using calc() and ensured that the thumbnail image fills the entire div by applying the following CSS: ...

phpcsswordpressthumbnailsimage-size

Issue with React Testing Library not reflecting changes in input field state

Recently delving into RLT, I encountered a strange issue while attempting to write a unit test for an input box. The RTL does not seem to update the state for the input value correctly. Below is the code snippet I used for testing: import { fireEvent, scre ...

reactjsnext.jsjestjsreact-testing-library

Is it best to remove trailing/leading whitespace from user input before insertion into the database or during the input process?

There's something I've been pondering that pertains to MVC platforms, but could also be relevant to any web-based platform that deals with user input forms. When is the best time and method to eliminate leading/trailing whitespace from user inpu ...

javascriptruby-on-railsdatabaseformsmodel-view-controller

Creating interactive carousel slides effortlessly with the power of Angular and the ngu-carousel module

I'm currently tackling the task of developing a carousel with the ngu-carousel Angular module, available at this link. However, I'm facing some challenges in configuring it to dynamically generate slides from an array of objects. From what I&apos ...

javascriptangulartypescriptngu-carousel