Question 300591 in CSS Question posted in
Some basic documentation can be found here.

Css – How can I get my MUI Typography component to render a custom image cursor on hover?

I tested setting the cursor to cursor: pointer which works fine, but I would like to use a custom image as a cursor. The image is stored in my src folder and I tried it in the public folder as well. I’m assuming I’m messing something up with the sytnax on "url(JavaScript-logo.png)"

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

I have also tried it without the &:hover, and without auto

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    I figured it out, the issue was that the image dimensions I was using were too large so I reduced the dimensions and everything works perfectly.


  2. 0

    Have you imported the image yet?

    See this guide Adding Image

    Login or Signup to reply.
  3. 0

    There is a problem with your image. You need to take a look at that. Below is the sample code(similar to yours) which I used and it worked. I have used proper-sized svg. You can replace it with png too.

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

    SAMPLE DEMO

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search