KPC
Kevin Powell - Community•9mo ago
Pat66

Trying to set a scale on title

Hi everyone I realise simple effect on a page who have a title the purpose is when the mouse is on the title the mouse should grow 
 <main class="central">
        <h1 >Trying to learn JS </h1>
    </main>
<div class="mouse"></div>
 <main class="central">
        <h1 >Trying to learn JS </h1>
    </main>
<div class="mouse"></div>
const central=document.querySelector('.central');
console.log(central);


const title=document.querySelector('h1');
title.addEventListener("mouseenter",()=>{
    souris.classList.toggle('survol');
})

title.addEventListener("mouseout",()=>{
    souris.classList.toggle('survol');
})



const souris=document.querySelector('.mouse');
console.log(souris);
window.addEventListener("mousemove",(e)=>{
    console.log(e);
   souris.style.left=e.pageX+ "px" ;
   souris.style.top=e.pageY + "px";
})
const central=document.querySelector('.central');
console.log(central);


const title=document.querySelector('h1');
title.addEventListener("mouseenter",()=>{
    souris.classList.toggle('survol');
})

title.addEventListener("mouseout",()=>{
    souris.classList.toggle('survol');
})



const souris=document.querySelector('.mouse');
console.log(souris);
window.addEventListener("mousemove",(e)=>{
    console.log(e);
   souris.style.left=e.pageX+ "px" ;
   souris.style.top=e.pageY + "px";
})
my css: 
.mouse{
width: 19px;
height: 19px;
border-radius: 100%;
background-color: rgb(180, 180, 180);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
mix-blend-mode: difference;
transition: .2s ease;
}

.survol{
    transform: scale(2);
}
.mouse{
width: 19px;
height: 19px;
border-radius: 100%;
background-color: rgb(180, 180, 180);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
mix-blend-mode: difference;
transition: .2s ease;
}

.survol{
    transform: scale(2);
}
the problem I have the scale work near on the title not on the title can I have some idea ti fix this ? thanks
1 Reply
Chris Bolson
Chris Bolson•9mo ago
I think that the issue is that the html element ".mouse" is actually getting the mouseover rather than the h1. It only appears to work as you get near due to the transition that you have on the mouse so, for the briefest of time, the pointer does manage to get over the h1 element before the mouse element reaches it. You should be able to resolve this by adding pointer-events: none; to your .mouse selector.

Did you find this page helpful?