CODEWITHSUNDEEP
javascripthtmlcss
Hejha
Hejha

Reputation: 29

Change background or color on hover

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>

Upvotes: 0

Views: 459

Answers (3)

Aleksandr Belugin
Aleksandr Belugin

Reputation: 2227

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>

Upvotes: 1

Temani Afif
Temani Afif

Reputation: 272647

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>

Upvotes: 1

Matan Sanbira
Matan Sanbira

Reputation: 1513

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>

Upvotes: 0

Related Questions