Kevin Powell - Community•8mo ago

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•8mo 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.

Gaming

Programming

Trying to set a scale on title