Change background or color on hover

Question

Is there a easy way to change color or background-color when the cursor is on the black divs, and show them in the white "cursor-area" ?

I know that it is possible if you change the black divs color and z-index on hover, but is there a way to do it through the white cursor - so that i don't have to modify every div that i want to show above the cursor.

EDIT: I made a new codepen-site. So I want the 'Hello'-text to get black when the white-cursor is over it. The black 'hello'-text should appear in the white area

// Cursor modified
var cursor = document.getElementById('cursor');
document.addEventListener('mousemove', function(e) {
    e.stopPropagation();
    var x = e.clientX;
    var y = e.clientY;
    cursor.style.left = x + 'px';
    cursor.style.top = y + 'px';
});

// Cursor HOVER modified - When hovering an element
var cursor = document.getElementById('cursor');
var clickableCursor = document.getElementsByClassName('clickableCursor');

for (var i = 0; i < clickableCursor.length; i++) {
    clickableCursor[i].addEventListener('mouseover', () => {
        cursor.style.height = "80px";
        cursor.style.width = "80px";
        cursor.style.animation = "cursorAnimation 5s linear infinite";
        cursor.style.background = "white";
    });
    clickableCursor[i].addEventListener('mouseout', () => {
        cursor.style.height = "40px";
        cursor.style.width = "40px";
        cursor.style.animation = "none";
        cursor.style.border = "2px solid white";
      cursor.style.background = "none";
    });
}

body {
  cursor: none;
}

.container {
  height: 3000px;
  width: 100%;
  position: relative;
  background: orange;
}

#cursor {
  backface-visibility: hidden;
  z-index: 1000000000;
  position: fixed;
  width: 40px;
  height: 40px;
  border: 2px solid white;
  transition: .1s;
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  transition-duration: 100ms;
  transition-timing-function: ease-out;
}

#cursor::before {
  content: '';
  position: absolute;
  height: 7px;
  width: 7px;
  border-radius: 100%;
  background-color: white;
}

.clickableCursor {
  font-size: 50px;
  color: white;
  position: fixed;
  background: black;
  padding: 50px
}

.one {
  top: 50px;
  left: 50px;
}

.two {
  top: 50px;
  right: 50px;
}

<div class="container">
  <div id="cursor"></div>
  <p class="clickableCursor one"> Hello </p>
</div>

what color do you need to change? the black box or the whole bg or the white cursor at the time of hover? — Uthistran Selvaraj, Jan 23 '20 at 20:27
When the cursor is hovered on the black box, I want the black box to be visible in the white area and change to a background-color, lets say red. — Hejha, Jan 23 '20 at 20:30

Aleksandr Belugin · Answer 1 · 2020-01-23T22:04:49.913

UPDATE TO UPDATED QUESTION

replace <p> with div, put into it <div id="cursor"></div>.

Then wrap text for example with <span> and make css

.text:hover {
  color: black;
  z-index: 1000000001; /*higher that #cursor's*/
  position: relative; /*this is neede to z-index work*/
}

Also, if you replace <span> with <div>, take away padding from .clickableCursor and put it to .text, which is now <div>, result will be better. Look up in the snippet.

// Cursor modified
var cursor = document.getElementById('cursor');
document.addEventListener('mousemove', function(e) {
    e.stopPropagation();
    var x = e.clientX;
    var y = e.clientY;
    cursor.style.left = x + 'px';
    cursor.style.top = y + 'px';
});

// Cursor HOVER modified - When hovering an element
var cursor = document.getElementById('cursor');
var clickableCursor = document.getElementsByClassName('clickableCursor');

for (var i = 0; i < clickableCursor.length; i++) {
    clickableCursor[i].addEventListener('mouseover', () => {
        cursor.style.height = "80px";
        cursor.style.width = "80px";
        cursor.style.animation = "cursorAnimation 5s linear infinite";
        cursor.style.background = "white";
    });
    clickableCursor[i].addEventListener('mouseout', () => {
        cursor.style.height = "40px";
        cursor.style.width = "40px";
        cursor.style.animation = "none";
        cursor.style.border = "2px solid white";
      cursor.style.background = "none";
    });
}

body {
  cursor: none;
}

.container {
  height: 3000px;
  width: 100%;
  position: relative;
  background: orange;
}

#cursor {
  backface-visibility: hidden;
  z-index: 1000000000;
  position: fixed;
  width: 40px;
  height: 40px;
  border: 2px solid white;
  transition: .1s;
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  transition-duration: 100ms;
  transition-timing-function: ease-out;
}

#cursor::before {
  content: '';
  position: absolute;
  height: 7px;
  width: 7px;
  border-radius: 100%;
  background-color: white;
}

.clickableCursor {
  font-size: 50px;
  color: white;
  position: fixed;
  background: black;

}

.one {
  top: 50px;
  left: 50px;
}

.two {
  top: 50px;
  right: 50px;
}

.text {
  padding: 50px
}

.text:hover {
  color: black;
  z-index: 1000000001;
  position: relative;
}

<div class="container">
  
  <div class="clickableCursor one">
    <div id="cursor"></div>
    <div class="text">
      Hello
    </div>
  </div>
</div>

But if you make the black boxes 100px width and 100px height or bigger - it won't work — Hejha, Jan 23 '20 at 20:45
@Hejha if that is a requirement of answers, *add it to your question*, don't just continue to add it under every new answer, wasting answerer's time. — Heretic Monkey, Jan 23 '20 at 20:53
@Hejha I changes and it works as with small ones, or I don't get what you want to achieve. — Aleksandr Belugin, Jan 23 '20 at 20:53
Ok, so I want the 'Hello' text to be visible in the white area — Hejha, Jan 23 '20 at 21:11
Guessing, but I think the OP wants the white circle to act like a spotlight, and to display the bits of text that it is hovering "through" the white circle. Is that correct, @Hejha? — cssyphus, Jan 23 '20 at 21:14

score 1 · Answer 2 · answered Jan 23 '20 at 20:53

You can consider the use of mix-blend-mode with the darken value since your cursor is white. You have to adjust your code to add an extra wrapper to isolate the mix-blend-mode effect from the background.

You can also simplify your JS code and consider CSS only hover effect:

// Cursor modified
var cursor = document.getElementById('cursor');
document.addEventListener('mousemove', function(e) {
  e.stopPropagation();
  var x = e.clientX;
  var y = e.clientY;
  cursor.style.left = x + 'px';
  cursor.style.top = y + 'px';
});

body {
  cursor: none;
  margin: 0;
}

.container {
  height: 3000px;
  width: 100%;
  position: relative;
  background: orange;
}

#cursor {
  backface-visibility: hidden;
  z-index: 100000;
  position: fixed;
  width: 40px;
  height: 40px;
  border: 2px solid white;
  background: radial-gradient(circle 4px, #fff 98%, transparent 100%);
  transition: .1s ease-out;
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
  mix-blend-mode: darken;
}

.clickableCursor {
  position: fixed;
  height: 20px;
  width: 20px;
  background: black;
}

.clickableCursor:hover~#cursor {
  width: 80px;
  height: 80px;
  background: white;
}
.clickableCursor:hover {
  background:blue;
}

.one {
  top: 50px;
  left: 50px;
}

.two {
  top: 50px;
  right: 50px;
}

.three {
  bottom: 50px;
  left: 50px;
}

.four {
  bottom: 50px;
  right: 50px;
}

<div class="container">
  <div style="isolation:isolate">
    <div class="clickableCursor one"></div>
    <div class="clickableCursor two"></div>
    <div class="clickableCursor three"></div>
    <div class="clickableCursor four"></div>
    <div id="cursor"></div>
  </div>
</div>

@Hejha check this then: https://stackoverflow.com/a/49793884/8620333 — Temani Afif, Jan 23 '20 at 21:13

score 0 · Answer 3 · edited Jan 23 '20 at 20:50

Why not use :hover? It works fine - or did I not understand you.

// Cursor modified
var cursor = document.getElementById('cursor');
document.addEventListener('mousemove', function(e) {
    e.stopPropagation();
    var x = e.clientX;
    var y = e.clientY;
    cursor.style.left = x + 'px';
    cursor.style.top = y + 'px';
});

// Cursor HOVER modified - When hovering an element
var cursor = document.getElementById('cursor');
var clickableCursor = document.getElementsByClassName('clickableCursor');

for (var i = 0; i < clickableCursor.length; i++) {
    clickableCursor[i].addEventListener('mouseover', () => {
        cursor.style.height = "80px";
        cursor.style.width = "80px";
        cursor.style.animation = "cursorAnimation 5s linear infinite";
        cursor.style.background = "white";
    });
    clickableCursor[i].addEventListener('mouseout', () => {
        cursor.style.height = "40px";
        cursor.style.width = "40px";
        cursor.style.animation = "none";
        cursor.style.border = "2px solid white";
      cursor.style.background = "none";
    });
}

body {
  cursor: none;
}

.container {
  height: 3000px;
  width: 100%;
  position: relative;
  background: orange;
}

#cursor {
  backface-visibility: hidden;
  z-index: 1000000000;
  position: fixed;
  width: 40px;
  height: 40px;
  border: 2px solid white;
  transition: .1s;
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  transition-duration: 100ms;
  transition-timing-function: ease-out;
}

#cursor::before {
  content: '';
  position: absolute;
  height: 7px;
  width: 7px;
  border-radius: 100%;
  background-color: white;
}

.clickableCursor {
  position: fixed;
  height: 20px;
  width: 20px;
  background: black;
}

.clickableCursor:hover {
  z-index: 1000000001;
  background: red;
}

.one {
  top: 50px;
  left: 50px;
}

.two {
  top: 50px;
  right: 50px;
}

.three {
  bottom: 50px;
  left: 50px;
}

.four {
  bottom: 50px;
  right: 50px;
}

<div class="container">
  <div id="cursor"></div>
  <div class="clickableCursor one"></div>
  <div class="clickableCursor two"></div>
  <div class="clickableCursor three"></div>
  <div class="clickableCursor four"></div>
</div>

But if you make the black boxes 100px width and 100px height or bigger - it won't work — Hejha, Jan 23 '20 at 20:45
it's not clear what you want to happen? the box will always be above the mouse even if it's 100px wide and heigh. — Matan Sanbira, Jan 23 '20 at 20:49
Sorry for it. I made a new codepen file to describe my problem. https://codepen.io/djaisdjasidj/pen/RwNvePZ — Hejha, Jan 23 '20 at 20:55

Change background or color on hover

3 Answers3