Issue
Here is my code so far, and I'm really confused about why my code is not working and the cursor is not transforming for the particular section with the image. Thanks for the help in advance.
<script>
var cursor = document.querySelector('.cursor');
document.addEventListener('mousemove', (e) => {
cursor.style.left = e.pageX + 'px';
cursor.style.top = e.pageY + 'px';
});
</script>
<section class="cursorHover">
<img loading="lazy" src="imgs/im/Vector.png" class="img mt-4" />
</section>
<script>
var cursor3 = document.querySelector('.cursorHover');
cursor3.addEventListener('MouseEvent', () => {
var element = document.querySelector('.cursor');
element.style.transform = 'scale(6)';
});
</script>
<style>
.cursor {
position: absolute;
background: white;
width: 20px;
height: 20px;
border-radius: 100%;
user-select: none;
pointer-events: none;
mix-blend-mode: difference;
transform: translate(-50%, -50%) scale(0.9);
z-index: 9999;
}
</style>```
Solution
Please try mouseenter + mouseleave events
<div class="cursor"> <!-- Added! -->
</div>
<script>
var cursor = document.querySelector('.cursor');
document.addEventListener('mousemove', (e) => {
cursor.style.left = e.pageX + 'px';
cursor.style.top = e.pageY + 'px';
});
</script>
<section class="cursorHover" style="background: green;">
<img loading="lazy" src="imgs/im/Vector.png" class="img mt-4" />
</section>
<script>
var cursor3 = document.querySelector('.cursorHover');
cursor3.addEventListener('mouseenter', () => {
var element = document.querySelector('.cursor');
element.style.transform = 'scale(6)';
});
cursor3.addEventListener('mouseleave', () => {
var element = document.querySelector('.cursor');
element.style.transform = '';
})
</script>
<style>
.cursor {
position: absolute;
background: white;
width: 20px;
height: 20px;
border-radius: 100%;
user-select: none;
pointer-events: none;
mix-blend-mode: difference;
transform: translate(-50%, -50%) scale(0.9);
z-index: 9999;
}
body{background:white;} /* Added to demo */
</style>
Answered By - user23274861
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.