CODEWITHSUNDEEP
javascriptcssreactjs
Biraj Dahal
Biraj Dahal

Reputation: 57

How Can I change the mouse cursor when hovering the specific part of the image in ReactJS?

I have created an application in ReactJS

HTML

<div id="root"></div>

React JS

function MouseCursor() {
    return(
        
            <div>
                <img src='https://usabilla.com/graphics/resources/usabilla-logo.png' style={{cursor: "wait", backgroundRepeat: "no-repeat", height: "160px",  width:"80%"}} />
                
                <p>Right Now the cursor image changes when overing the image</p>
            </div>
    
    )
}

ReactDOM.render(<MouseCursor />, document.querySelector("#root"))

the jsfiddle for this code is :

https://jsfiddle.net/vewzyo2x/

When I hover the image the cursor changes, but I need to change the cursor of the mouse only when a certain part of the image is hovered as shown in the below image enter image description here

I need to change the cursor of the image only when the mouse is hovered on the circle shown in the above image. How can I do that?

Upvotes: 0

Views: 2905

Answers (1)

A Haworth
A Haworth

Reputation: 36664

If you measure various distances on the image when the 'blob' is circular you get CSS to calculate what dimensions and what positioning (in % terms) the blob has in relation to the whole image. As the image is stretched, the blob will stretch accordingly.

In this vanilla JS snippet the logo image is shown as the background to the div and the blob is its child div. This saves having to add another div into the DOM which wouldn't add more meaning.

The measurements were just taken with a ruler (the units don't matter)

.usabilla {
  --h: 8.75;
  /* image height measured by a ruler */
  --w: 19.4;
  /* image width */
  --top: 1.5;
  /* position of the blob */
  --left: 11.7;
  --diam: 2;
  /* diameter of the blob (when the blob was circular) */
  width: 80%;
  height: 160px;
  background-image: url(https://usabilla.com/graphics/resources/usabilla-logo.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center center;
  position: relative;
}

.blob {
  cursor: wait;
  height: calc(var(--diam) / var(--h) * 100%);
  width: calc(var(--diam) / var(--w) * 100%);
  position: absolute;
  top: calc(var(--top) / var(--h) * 100%);
  left: calc(var(--left) / var(--w) * 100%);
  background-color: transparent;
  border-radius: 50%;
}
<div class="usabilla">
  <div class="blob"></div>
</div>

Upvotes: 1

Related Questions