Hide Circle Cursor when not in Tab

by

I have a question about my circle cursor I created with your help.
I want it to disappear when the user takes their cursor of the page.
Right now It just stays at the last location it was before taking the cursor out of the page.

Here’s my code
I am not that experienced in especially JavaScript so I don’t really know how to go about this problem

const cursor = document.querySelector(".cursor");

window.addEventListener("mousemove", (e) => {

  let x = e.pageX - window.scrollX;
  let y = e.pageY - window.scrollY;

  cursor.style.left = `${x}px`;
  cursor.style.top = `${y}px`;
});
@import url(/css/satoshi.css);
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Satoshi-Variable;
}

html,
body {
  height: 100%;
  min-height: 100%;
}

body {
  background-color: #f0efe9;
  height: 100vh;
  width: 100%;
  cursor: none;
}

.cursor {
  height: 40px;
  width: 40px;
  border-radius: 50%;
  position: fixed;
  transform: translate(-50%, -50%);
  pointer-events: none;
  background: #f0efe9;
  mix-blend-mode: difference;
  transition: width 0.1s linear, height 0.1s linear;
}

body:has(a:hover) .cursor {
  transform: translate(-50%, -50%);
  height: 80px;
  width: 80px;
}

a {
  cursor: none;
  text-decoration: none;
  color: #0f1016;
}

div {
  border-spacing: 0;
  display: block;
}

.a1 {
  width: 50%;
  height: 25%;
}

.a2 {
  width: 60%;
  height: 50%;
}

.a3 {
  width: 50%;
  height: 25%;
}

.icon {
  padding: 5% 0 5% 10%;
  max-width: 40%;
}

.skills {
  font-family: Satoshi-Variable;
  font-weight: 600;
  font-size: 2em;
  padding-left: 10%;
  padding-top: 2%;
  padding-bottom: 2%;
  color: #0f1016;
}

.graphic_designer {
  margin-top: 2%;
  margin-bottom: 2%;
}

ul {
  list-style: none;
}

.about_me {
  padding-left: 10%;
  line-height: 2em;
  color: #0f1016;
}
<div class="a1">
  <img class="icon" src="https://stackoverflow.com/assets/meskhi_graphics_logo.svg">
</div>
<div class="a2">
  <ul class="skills">
    <li class="social_media">Social Media <br>Marketing Manager</br>
    </li>
    <li class="graphic_designer">Graphic Designer</li>
    <li><a href="#">UI/UX Designer</a></li>
  </ul>
  <p class="about_me">Hey, Ich bin David und komme aus Kalrsruhe.<br> Beruflich bewege ich mich in der Welt des Grafikdesign<br> und UI/UX Designs. Derzeit stecke ich mitten in einer<br> Weiterbildung zum Social Media Marketing Manager.
  </p>
</div>
<div class="a3"></div>
<div class="cursor"></div>

  • 1

    What’s the difference between this question and the one you posted earlier today?

    – 




  • I want to make the cursor disappear when im not on the website, for example when I move my cursor to the top of the screen, so basically out of the body

    – 

  • Outside of the browser, or in the browser?

    – 

  • in the browser, just not on the page

    – 

  • What do you mean? Hide it when the user is inside the browser, but on top of say the home button, or address bar?

    – 

You can use the body:hover pseudo-class.
With your permission, I will leave only the necessary in the example:

const cursor = document.querySelector('.cursor');

window.addEventListener('mousemove', (event) => {
  const {clientX, clientY} = event;
  cursor.style.transform = `translate3d(${clientX}px, ${clientY}px, 0)`;
});
body {
  cursor: none;
  margin: 0;
  min-height: 100dvh;
}

body:not(:hover) .cursor {
  display: none;
}

.cursor {
  height: 40px;
  width: 40px;
  border-radius: 50%;
  position: fixed;
  margin: -20px 0 0 -20px;
  pointer-events: none;
  background: #f0efe9;
}
<div class="cursor"></div>

Leave a Comment