The cursor remains positioned below the video within the designated div

I'm currently facing an issue in a project where the cursor div I created stays underneath the video element. No matter what I do, I can't seem to bring it to the front. Even setting a z-index on the video tag hasn't helped. Can someone please assist me with this problem?

var crs = document.querySelector('.cursor');

document.addEventListener('mousemove', (e) => {
  var ds1 = e.clientX - crs.clientWidth / 2;
  var ds2 = e.clientY - crs.clientHeight / 2;

  crs.setAttribute('style', `position: fixed;left:${ds1}px;top:${ds2}px;z-index:999;`);

})
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: 'Roboto', sans-serif;
  cursor: none;
  scroll-behavior: smooth;
}

.cursor {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background-color: #000 !important;
  mix-blend-mode: difference;
  transition: padding .4s;
  position: fixed;
  z-index: 999;
  pointer-events: none;
}

#home-vd {
  position: relative;
  z-index: 10;
}
<video class="video" id="home-vd" src="https://www.w3schools.com/tags/movie.mp4"></video>

<div class="cursor" id="cursor">

</div>

javascripthtmlcsspositioncursor

Answer №1

It seems that the issue lies in the mix-blend-mode: difference. By removing it, the display appears correctly:

var crs = document.querySelector('.cursor');

document.addEventListener('mousemove', (e) => {
  var ds1 = e.clientX - crs.clientWidth / 2;
  var ds2 = e.clientY - crs.clientHeight / 2;

  crs.setAttribute('style', `position: fixed;left:${ds1}px;top:${ds2}px;z-index:999;`);

})
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: 'Roboto', sans-serif;
  cursor: none;
  scroll-behavior: smooth;
}

.cursor {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background-color: #000 !important;
  /* mix-blend-mode: difference; */
  transition: padding .4s;
  position: fixed;
  z-index: 999;
  pointer-events: none;
}

#home-vd {
  position: relative;
  z-index: 10;
}
<video class="video" id="home-vd" src="https://www.w3schools.com/tags/movie.mp4"></video>

<div class="cursor" id="cursor">

</div>

Although I'm not well-versed in blend modes, it seems that using difference as the foreground can cause it to disappear on any background color:

var crs = document.querySelector('.cursor');

document.addEventListener('mousemove', (e) => {
  var ds1 = e.clientX - crs.clientWidth / 2;
  var ds2 = e.clientY - crs.clientHeight / 2;

  crs.setAttribute('style', `position: fixed;left:${ds1}px;top:${ds2}px;z-index:999;`);

})
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: 'Roboto', sans-serif;
  cursor: none;
  scroll-behavior: smooth;
}

.cursor {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background-color: #000 !important;
  mix-blend-mode: difference;
  transition: padding .4s;
  position: fixed;
  z-index: 999;
  pointer-events: none;
}

#home-vd {
  position: relative;
  z-index: 10;
}

.block {
  height: 300px;
  width: 300px;
  background-color: magenta;
  color: white;
}
<h1 class="block">hi hi hi hi</h1>

<div class="cursor" id="cursor">

</div>

To achieve a more usable result, try using a different color:

var crs = document.querySelector('.cursor');

document.addEventListener('mousemove', (e) => {
  var ds1 = e.clientX - crs.clientWidth / 2;
  var ds2 = e.clientY - crs.clientHeight / 2;

  crs.setAttribute('style', `position: fixed;left:${ds1}px;top:${ds2}px;z-index:999;`);

})
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: 'Roboto', sans-serif;
  cursor: none;
  scroll-behavior: smooth;
}

.cursor {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background-color: #555 !important;
  mix-blend-mode: difference;
  transition: padding .4s;
  position: fixed;
  z-index: 999;
  pointer-events: none;
}

#home-vd {
  position: relative;
  z-index: 10;
}

.block {
  height: 300px;
  width: 300px;
  background-color: magenta;
  color: white;
}
<h1 class="block">hi hi hi hi</h1>

<div class="cursor" id="cursor">

</div>

If you're curious about the color math behind blend modes, perhaps someone more knowledgeable in the field could provide insights.

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

Creating an oval cutout shape using CSS in a div element

I am currently facing some challenges creating the design depicted in the image above, particularly with the oval shape. Let me provide an explanation: The menu bar is designed as a div with a subtle linear gradient that transitions from dark grey to a l ...

jqueryhtmlcsscss-shapes

Ways to adjust the dimensions of a division element using Bootstrap

I have a CSS class called "brands" and I am looking to change the size of the thumbnail div within this brand class. How can I go about doing this? <div class="brands"> <div class="row"> <?php foreach ($item['brands'] ...

htmlcsstwitter-bootstrap

What is the method for adding a tag within a specific div ID in ExtJS?

I am looking to insert a new tag within existing tags using extjs, based on the div id 'task123', and also trigger an alert message accordingly. Below is the HTML code snippet: <div id="task123"> <div class="msg" id="sample"> ...

javascriptjquerycsshtmlextjs

Issue: ReactJS + MaterialUI + TypeScript - Property 'component' does not exist?Possible error in ReactJS: component property is

Currently, I am designing my own custom typography. However, I have encountered an error while implementing it. I have been referring to the following documentation: https://mui.com/material-ui/api/typography/ Here is the code snippet that I am using: h ...

javascriptreactjsreduxreact-hooksmaterial-ui

Next.js is constantly fetching data with React Query

Within my Next.js project, I incorporated a query client into a page component, utilizing getServerSideProps for server-side rendering. The structure of the page is as follows: const Index = ({ configData }) => { const { t } = useTranslation(); cons ...

javascriptreactjsnext.jsreact-query

Issue with JavaScript HTML Section Changer not functioning properly

I need to implement a button that switches between two pages when pressed. Although the code seems simple, I am struggling to make it work. HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"& ...

javascripthtmlcss

What is the best way to refresh the script located within the head tag of an index.html file in an Angular

I've been looking for solutions, but I can't seem to find one. In my index.html file, I've placed some script within the head tag (even above the </body> tag) and included a $(document).ready function. The issue I'm facing is th ...

javascriptangulartypescript

When you log a JavaScript array after making a call using $.ajax, it may return an index

I am experiencing an issue with my array of 10 elements. When I log their key, value pairs in a loop, they are correctly ordered. $.each( sArray, function(i, k) { log(i, k); // log(i, k) returns correctly // [0] ELEMENT ONE // [1] ELEMENT TW ...

javascriptarraysajaxindexingunordered

By checking the active box and completing the fields, the button will be activated

I'm currently working on a form that requires all fields to be filled out and the acceptance checkbox to be checked before the Submit button becomes active. If any entry or the checkbox is subsequently removed, the button should become inactive again. ...

javascriptjqueryhtml

positioning a text input in the center instead of at the top of the page

Hello everyone, I am just starting out with HTML and I have a question. How can I make the Username: <input type="text" name="Username" style="- margin-top: 200px;"> appear in the center of the page instead of at the top? I've tried changing the ...

javascripthtml

Navigate to the top of the Vue scrollable list using v-auto-complete

I need to implement a feature that automatically scrolls to the top of a scrollable list every time the search input is changed. Currently, I have a list where multiple items can be selected, and I want it to reset to the top whenever a new search query is ...

javascriptvue.jsscrollvuetify.js

What could be causing the malfunction of this JavaScript dropdown select feature in Internet Explorer?

I created a website that requires users to input their location, including the city and state. The process involves two dropdown menus: - The first dropdown menu, labeled "state," loads all USA states as selectable options when the website is loaded. This ...

javascriptjqueryhtmljsoninternet-explorer

Using jQuery's .on() method to dynamically add classes

Why is this method not functioning as expected? My understanding was that by assigning a class to the trigger element when it opens, I could then use that class to close it when the trigger is clicked again. // Trigger for menu $('.menu-trigger' ...

jqueryhtml

How come my HTML form keeps refreshing instead of displaying an alert after submission, even though I've included onsubmit="return false"? Additionally, it seems to be throwing an error

Why is this basic HTML and JavaScript code not functioning properly? Instead of alerting once the form is submitted, it refreshes the page and throws an error. It has also been reported to sometimes throw a CORS error when using 'module' as scri ...

javascripthtml

Guide to combining an object with an array object in Vue.js

After receiving an API response's data, [{id: 1, name:"Test 1"},{id: 2, name:"Test 2"}] I am working on my component .vue file. ... created() { const request = axios.get("***api_url***").then(response => { ...

javascriptvue.jsvuejs2

Having trouble getting the CSS Transform property to be affected by ScrollTop

Hello everyone, I am attempting to create a ball that has a 50% radius and rolls left based on the user's scroll movements. So far, I have successfully made it move left in relation to ScrollTop, but unfortunately, I cannot get the transform property ...

jquerycssjquery-animatecss-animationsscrolltop

A superior method for implementing CSS keyframe transitions

Currently, I am utilizing the Rico St.Cruz brilliant query.transit library for my work. However, I need to make some changes involving classes instead of CSS transitions. Although I am not very confident in CSS transitions, I attempted to replace: JS: $ ...

javascriptjqueryhtmlcss

Table that can be scrolled through

Back in 2005, Stu Nichols shared a technique for creating a fixed header with scrolling rows in a table on this site. I'm curious if there are any newer methods or improvements to achieve the same effect, or is Stu's approach from 2005 still con ...

jquerycss

Ways to define the background color of a form group

I am trying to customize the background color of a form-group element. To illustrate my point, take a look at the image below In the image above, I have highlighted the div in question and I want to change its background color from within the form-group. ...

htmlcsstwitter-bootstrap-3

What is the reason behind JavaScript libraries opting for a structure of [{ }] when using JSON?

I have been experimenting with various Javascript libraries, and I've noticed that many of them require input in the format: [{"foo": "bar", "12": "true"}] As stated on json.org: Therefore, we are sending an object within an array. With this observ ...

phpjsonjavascript