We Keep Coding

Why "div" with "position: absolute" overflows screen

I watched a tutorial on how to make custom cursor in CSS and JavaScript. I did it, but when I move it down to the bottom of the screen, it overflows and expands unnecessarily website like this:
(this dark circle is the cursor)
I don't know what to do. It works, when I change overflow-y to hidden, but this is not what I want because then every other element on the website is also hidden.
CSS:
html {
font-size: 10px;
overflow-x: hidden;
cursor: none;
}
.cursor {
display: none;
z-index: 10;
position: absolute;
width: 5rem;
height: 5rem;
border-radius: 5rem;
background-color: #000000;
opacity: .4;
transform: translate(-50%, -50%);
pointer-events: none;
transition: all .3s ease;
transition-property: opacity, transform;
transform-origin: 100% 100%;
}
JS:
window.onload = () => {
cursor.style.display = 'inline';
}
const changeCursorPosition = e => {
cursor.style.left = e.pageX + 'px';
cursor.style.top = e.pageY + 'px';
}
window.addEventListener('mouseover', changeCursorPosition);
window.addEventListener('mousemove', changeCursorPosition);

You can always just use an image as the cursor.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property
* {
cursor: url(data:image/png;base64,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) -10 -10, auto;
}

Enlarge custom cursor pointer on hovering links using JS

I've been working on a custom cursor that I want to grow when it hovers over objects with a certain property. I started with css, found that unreliable, and now am trying to use js- pure js that is, not jquery.
The cursor movement seems to work well enough, and the bit for transforming the outer circle also seems to throw up no errors at all, which leaves me confused as to whats going on here. Any help would be appreciated.
/*kinda laggy cursor control js */
const cursor = document.querySelector('.cursor');
document.addEventListener('mousemove', e => {
cursor.setAttribute("style", "top: " + e.pageY + "px; left: " + e.pageX + "px;")
})
const cursor2 = document.querySelector('.cursor2');
document.addEventListener('mousemove', e => {
cursor2.setAttribute("style", "top: " + e.pageY + "px; left: " + e.pageX + "px;")
})
const all = document.querySelectorAll(".use");
document.addEventListener('mouseOver', function() {
cursor.style.transform = scale(2)
})
.cursor {
width: 25px;
height: 25px;
position: absolute;
border: 2px solid rgb(41, 41, 41);
border-radius: 50%;
transform: translate(-50%, -50%);
transition: 50ms;
transition-timing-function: ;
mix-blend-mode: difference;
z-index: 200;
pointer-events: none;
}
.cursor2 {
z-index: 200;
transition: 10ms;
width: 5px;
height: 5px;
border-radius: 50%;
background-color: black;
pointer-events: none;
mix-blend-mode: difference;
position: absolute;
transition-timing-function: ;
}
.style {
font-family: 'Helvetica';
font-size: calc(2em + 8vw);
font-weight: 700;
-webkit-text-fill-color: rgba(0, 0, 0, 0);
-webkit-text-stroke: 1px;
-webkit-text-stroke-color: rgb(0, 0, 0);
letter-spacing: -.6vw;
line-height: calc(.7em + 1vw);
animation: marquee 30s linear infinite;
display: inline-block;
user-select: none;
}
a {
text-decoration: none;
cursor: none;
}
a:hover+.cursor {
transform: scale(1.5);
!important transition-duration: 500ms;
}
<div id="style use">hello</div>
<!-- outer cursor div-->
<div class="cursor">
</div>
<!-- inner cursor div-->
<div class="cursor2">
</div>

element.style.transform needs to have a string value (in your case, it should have been 'scale(2)' [a string]). I have added a class enlarged to add the increased width and height styles to your cursor upon mouseenter and mouseout of every link in your document.
Here's a working example.
const cursor = document.querySelector('.cursor');
const cursor2 = document.querySelector('.cursor2');
const links = document.querySelectorAll('a')
links.forEach(link => {
link.addEventListener('mouseenter', e => {
cursor.classList.add('enlarged')
})
link.addEventListener('mouseout', e => {
cursor.classList.remove('enlarged')
})
})
document.addEventListener('mousemove', e => {
cursor.setAttribute("style", "top: " + e.pageY + "px; left: " + e.pageX + "px;")
cursor2.setAttribute("style", "top: " + e.pageY + "px; left: " + e.pageX + "px;")
})
html,
body {
width: 100%;
height: 100%;
margin: 0;
cursor: none;
}
.cursor {
width: 25px;
height: 25px;
position: absolute;
border: 2px solid rgb(41, 41, 41);
border-radius: 50%;
transform: translate(-50%, -50%);
transition:
top 50ms linear,
left 50ms linear,
width 500ms ease,
height 500ms ease;
z-index: 1;
pointer-events: none;
}
.cursor.enlarged {
width: 50px;
height: 50px;
}
.cursor2 {
transition: 10ms;
z-index: 1;
width: 5px;
height: 5px;
border-radius: 50%;
background-color: black;
pointer-events: none;
position: absolute;
transform: translate(-50%, -50%);
}
a {
text-decoration: none;
cursor: none;
font-family: Helvetica;
font-size: 4em;
padding: 15px;
}
<div id="style use">Hello</div>
<!-- outer cursor div-->
<div class="cursor">
</div>
<!-- inner cursor div-->
<div class="cursor2">
</div>

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>

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>

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>

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>

Mouse hover moving image position

I am trying to move an image when my mouse is over it.
Here's an exemple. When moving hover pictures, the text is smoothly following your mouse and this is what I'm looking for.
Do you have any idea ?
The problem with what I tried is that the image keeps moving when I get out of the violet box. (I would prefer to avoid having to create a box and recognize when I am over the image).
$("#containerScaled").on('mousemove', '.box', function (e) {
$("#followC").css("top", e.clientY)
.css("left", e.clientX);
});
<style>
#containerScaled, #followC {
transition: all 0.9s ease-out;
transform-origin: center;
transform: scale(1, 1);
}
.box {
height:50px;
width:50px;
left: 500px;
top: 50px;
background-color: blueviolet;
position: absolute;
}
.mouseFollow {
position: fixed;
width:70px;
height:20px;
font-size:12px;
pointer-events:none;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="containerScaled" class="container">
<div class="box">test</div>
</div>
<div id="followC" class="mouseFollow"><img src=" image "/></div>

I think you should begin with altering your position based on where your mose is positioned inside your rectangel like so:
if (e.clientX > width/2){
addX = 20;
}
if(e.clientX < width/2){
addX = -20;
}
if(e.clientY > height/2){
addY = 20;
}
if(e.clientY < height/2){
addY = -20;
}
This is the first step, that actually makes something "follow" your mouse.
I think you could do some optimization, so that the animation is more crispy, but basically thats the way to go.
I also added
$("#containerScaled").on('mouseleave', '.box', function(e) {
$("#followC").css("top", "50%").css("left", "50%");
});
so that your element will get back to its original position once you leave the :hover area
Because of this I also made you hover area transparent, any lay over the moving element, so that when you hover over the moving element, you wont leave the hover area, and trigger mouseleave
.box{
background-color: transparent;
}
.boxcolored{
position: absolute;
height: 100px;
width: 100px;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
background-color: green;
}
$("#containerScaled").on('mousemove', '.box', function(e) {
var left = parseFloat($(".box").css("left"));
var right = parseFloat($(".box").css("top"));
var width = parseFloat($(".box").css("widht"));
var height = parseFloat($(".box").css("height"));
var addX = 0;
var addY = 0;
if (e.clientX > width/2){
addX = 20;
}
if(e.clientX < width/2){
addX = -20;
}
if(e.clientY > height/2){
addY = 20;
}
if(e.clientY < height/2){
addY = -20;
}
$("#followC").css("top", e.clientY + addY)
.css("left", e.clientX + addX);
});
$("#containerScaled").on('mouseleave', '.box', function(e) {
$("#followC").css("top", "50%").css("left", "50%");
});
#containerScaled {
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 200px;
background-color: red;
}
#followC {
transition: all 0.9s ease-out;
transform-origin: center;
}
.box {
position: absolute;
height: 100px;
width: 100px;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
background-color: transparent;
}
.boxcolored{
position: absolute;
height: 100px;
width: 100px;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
background-color: green;
}
.mouseFollow {
position: relative;
height: 20px;
width: 75px;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
background-color: yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="containerScaled" class="container">
<div class="boxcolored"></div>
<div id="followC" class="mouseFollow">HALLO</div>
<div class="box">mouse me</div>
</div>

The box outlined in a red dashed line is the hover area. The yellow box is the visual area which is the approximation of the limits to which the letters can move within.
There is a lag and an offset. The lag is due to transition: 0.9s and the offset is left and top. The lag can be decreased but at the cost of the smooth movement, There are four letters at varying transition times for comparison. Notice that they all stop at the same position (when the mouse is no longer moving within the dashed box), it just that the slower the transition the more movement occurs after the mouse has left the dashed box.
The offset is tougher since there is only two positions that will work: x: right or left and y: top or bottom. If keeping the letters within a box is a concern, then keep the hover area border and background to none and show the offset (visual area) instead.
Note: Do not review this demo in compact mode, view it in full page mode (normal dimensions)
$(".target").on('mousemove', function(e) {
$(".text").css({
"top": e.clientY,
"left": e.clientX
});
});
main {
position:relative;
font: 400 16px/1.2 Arial;
}
.zone {
position: absolute;
z-index: 1;
height: 120px;
width: 110px;
margin: 90px 0 0 90px;
background: gold;
color:white;
text-align:right;
}
.target {
position: absolute;
z-index: 2;
height: 100px;
width: 100px;
margin: 75px;
outline: 3px dashed red;
color:red
}
.text {
position: absolute;
z-index: 3;
top: 90px;
left: 90px;
font-size: 32px;
color:black
}
.A {
transition: all 0.9s ease-out;
}
.B {
transition: all 0.6s ease-out;
}
.C {
transition: all 0.3s ease-out;
}
<main>
<section class="target">Hover Area</section>
<aside class="text A">A</aside>
<aside class="text B">B</aside>
<aside class="text C">C</aside>
<aside class="text D">D</aside>
<section class='zone'><b>Visual Area</b></section>
</main>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Js mouseClick event seems to fire on the wrong emelent

I have a simple div to which I'm adding a child. I'm trying to calculate the child's location with evt.clientX and clientY. Instead i seem to be getting the coordinates of the containing element even tho the function is on the divs.
How could i get the click event for the divs instead of the parent? I don't know much about event inheritance if that is even what it's called.
Here is the code:
function initRipple() {
//qck define
let rcont;
rcont = Array.from(document.getElementsByClassName('ripple'));
rcont.forEach(function(el) {
el.addEventListener('click', function(evt) {
ripple(el, evt);
});
});
}
function ripple(el, evt) {
// qck def
let cir, x, y;
// assign values
cir = document.createElement('div');
x = evt.clientX;
y = evt.clientY;
// modify circle attributes / position
cir.classList.add('ripple-bubble');
cir.style.left = `${ x - 12 }px`;
cir.style.top = `${ y - 12 }px`;
cir.addEventListener('animationend', function() {
let oldChild = el.removeChild(cir);
});
el.appendChild(cir);
}
initRipple();
body {background-color: #555}
#tablinks {
display: inline-block;
list-style-type: none;
position: absolute;
top: 0;
height: 100%;
display: flex;
}
#tablinks #tablinks-line {
height: 3px;
position: absolute;
bottom: 0;
left: 0;
min-width: 24px;
background-color: #6DADFF;
transition: all 0.3s ease;
pointer-events: none;
transform: translateZ(0);
}
#tablinks .tablink {
height: 56px;
line-height: 56px;
color: rgba(255, 255, 255, 0.7);
}
#tablinks .tablink.active {
color: #fff;
}
#tablinks .tablink a {
display: inline-block;
height: 56px;
line-height: 56px;
text-decoration: none;
padding: 0 24px;
font-size: 13px;
color: inherit;
outline: none;
font-family: robotomedium;
font-weight: 100;
}
.ripple {
position: relative;
overflow: hidden;
}
.ripple .ripple-bubble {
animation: ripple-effect 1s ease forwards;
width: 24px;
height: 24px;
position: absolute;
transform: translateZ(0);
background-color: rgba(255, 255, 255, 0.2);
border-radius: 50%;
pointer-events: none;
opacity: 0.7;
}
#keyframes ripple-effect {
from {
transform: scale(1);
opacity: 0.7;
}
to {
transform: scale(12);
opacity: 0;
}
}
<ul id="tablinks">
<li class="tablink ripple">TAB 1</li>
<!--
-->
<li class="tablink ripple">TAB 2</li>
<!--
-->
<li class="tablink ripple">TAB 3</li>
</ul>

The problem with your code is that clientX is relative to the whole page, not to the event.
A quick solution would be to change the computation of x to susbtract the x position of your element.
x = evt.clientX;
y = evt.clientY;
const rect = evt.target.getBoundingClientRect()
x -= rect.x;
y -= rect.y;
Here is a working pen: https://codepen.io/anon/pen/WMWZWd