0
235
Viewshow do i style some part of the shape in hover?
the bigger circle is the mouse cursor and the small one is a fixed circle in the center of the page,
how can style this circle like the image when the cursor touches some area of the center circle?
·
Juan Pablo Isaza
1 answers
Answer question0
Here is a simple example of a large circle being used like the cursor and using mix-blend-mode difference.
The background of the container is blue (#0000ff) and the circles are yellow (#ffff00) so that the difference is white (#ffffff).
When the circles overlap the difference is #000000 and that differenced with blue is blue.
<!doctype html>
<html>
<head>
<title>Circles</title>
<style>
.bg {
width: 100vw;
height: 100vh;
background: blue;
mix-blend-mode: difference;
cursor: none;
position: fixed;
top: 0;
left: 0;
}
.fixedcircle {
width: 100px;
height: 100px;
background: yellow;
border-radius: 50%;
top: calc(50% - 50px);
left: calc(50% - 50px);
position: relative;
position: fixed;
mix-blend-mode: difference;
}
.cursor {
width: 200px;
height: 200px;
border-radius: 50%;
background: yellow;
position: absolute;
mix-blend-mode: difference;
}
</style>
</head>
<body>
<div class="bg"></div>
<div class="fixedcircle"></div>
<script>
const cursor = document.createElement('div');
cursor.classList.add('cursor');
document.body.append(cursor);
document.body.addEventListener('mousemove', function() {
cursor.style.top = (event.clientY - 100) + 'px';
cursor.style.left = (event.clientX - 100) + 'px';
});
</script>
</body>
</html>
·
Juan Pablo Isaza
Report
Answer question