在JS中添加类的div不会触发多个元素上的mouseover事件。

huangapple go评论61阅读模式
英文:

div with added class in JS not triggering a mouseover event over multiple elements

问题

我的内部光标是一个圆圈,应该在JS中设置mouseover事件时随着具有.grow类的外部光标的大小而增大。当我悬停在按钮上时,它不会触发(它根本不会触发)。
有多个按钮(这是一个测试计算器),都有类名'button'。

<div class="inner-cursor">
</div>

<div class="outer-cursor">
</div>

<button class="button" type="button" value="1" id="1">1</button>
<button class="button" type="button" value="2" id="2">2</button>
.inner-cursor {
    position: fixed;
    left: 10px;
    width: 10px;
    height: 10px;
    transform: translate(-50%, -50%);
    background-color: #627CE4;
    border-radius: 50%;
    pointer-events: none;
    transition: width 0.5s, height 0.5s;
}

.outer-cursor {
    position: fixed;
    left: 10px;
    width: 25px;
    height: 25px;
    transform: translate(-50%, -50%);
    border: 1px solid #627CE4;
    border-radius: 50%;
    pointer-events: none;
    transition: 0.1s;
}

.inner-cursor.grow{
    width: 25px;
    height: 25px;
    transition: width 0.5s, height 0.5s;
}
let innerCursor = document.querySelector('.inner-cursor');
let outerCursor = document.querySelector('.outer-cursor');
let buttons = document.querySelector('.button');

document.addEventListener('mousemove', moveCursor);

function moveCursor(e){
    let x = e.clientX;
    let y = e.clientY;

    innerCursor.style.left = `${x}px`;
    innerCursor.style.top = `${y}px`;

    outerCursor.style.left = `${x}px`;
    outerCursor.style.top = `${y}px`;
}

function growCursor(e){
    buttons.addEventListener('mouseover', function (){
        innerCursor.classList.add('grow');
    });
    buttons.addEventListener('mouseleave', function () {
        innerCursor.classList.remove('grow');
    })
};
英文:

my inner-cursor is a circle that should grow to the size of the outer-cursor with the class of .grow when I set the mouseover event in JS. It doesn't trigger when I hover over specifically only buttons (it doesn't trigger at all).
There are multiple buttons (it is a test calculator) all with the class of 'button'.

&lt;div class=&quot;inner-cursor&quot;&gt;
&lt;/div&gt;

&lt;div class=&quot;outer-cursor&quot;&gt;
&lt;/div&gt;

&lt;button class=&quot;button&quot; type=&quot;button&quot; value=&quot;1&quot; id=&quot;1&quot;&gt;1&lt;/button&gt;
&lt;button class=&quot;button&quot; type=&quot;button&quot; value=&quot;2&quot; id=&quot;2&quot;&gt;2&lt;/button&gt;
.inner-cursor {
    position: fixed;
    left: 10px;
    width: 10px;
    height: 10px;
    transform: translate(-50%, -50%);
    background-color: #627CE4;
    border-radius: 50%;
    pointer-events: none;
    transition: width 0.5s, height 0.5s;
}

.outer-cursor {
   position: fixed;
   left: 10px;
   width: 25px;
   height: 25px;
   transform: translate(-50%, -50%);
   border: 1px solid #627CE4;
   border-radius: 50%; 
   pointer-events: none;
   transition: 0.1s;
}

.inner-cursor.grow{
    width: 25px;
    height: 25px;
    transition: width 0.5s, height 0.5s;
}
let outerCursor = document.querySelector(&#39;.outer-cursor&#39;);
let buttons = document.querySelector(&#39;.button&#39;);

document.addEventListener(&#39;mousemove&#39;, moveCursor);

function moveCursor(e){
    let x = e.clientX;
    let y = e.clientY;


    innerCursor.style.left = `${x}px`;
    innerCursor.style.top = `${y}px`;

    outerCursor.style.left = `${x}px`;
    outerCursor.style.top = `${y}px`;
}

function growCursor(e){
    buttons.addEventListener(&#39;mouseover&#39;, function (){
        innerCursor.classList.add(&#39;grow&#39;);
    });
    buttons.addEventListener(&#39;mouseleave&#39;, function () {
        innerCursor.classList.remove(&#39;grow&#39;);
    })
};

My attempts included the above (which produced no result) and the following where I tried to make the buttons an array (which actually halts the div from following the cursor's movement anymore):


let buttons = Array.from(document.querySelectorAll(&#39;b&#39;));

buttons.forEach((button) =&gt; {
    buttons.addEventListener(&#39;mouseover&#39;, () =&gt; {
            innerCursor.classList.add(&#39;grow&#39;);
});
buttons.addEventListener(&#39;mouseleave&#39;, () =&gt; {
    innerCursor.classList.remove(&#39;grow&#39;);
});
});

Thank you for any suggestions

答案1

得分: 0

错误在你的 JavaScript 代码中,必须是 button 而不是 buttons 在 forEach 函数内部。

// 这里可以使用以下任何一个
let buttons = Array.from(document.querySelectorAll('.button'));
// 添加了这个 innerCursor
let innerCursor = document.querySelector('.inner-cursor');

buttons.forEach((button) => {
    button.addEventListener('mouseover', () => {
        innerCursor.classList.add('grow');
    });
    button.addEventListener('mouseleave', () => {
        innerCursor.classList.remove('grow');
    });
});
英文:

error in your js code, it must be button and not buttons inside the forEach function

// use either one here
let buttons = Array.from(document.querySelectorAll(&#39;.button&#39;));
// added this innerCursor
let innerCursor = document.querySelector(&#39;.inner-cursor&#39;);

buttons.forEach((button) =&gt; {
    button.addEventListener(&#39;mouseover&#39;, () =&gt; {
        innerCursor.classList.add(&#39;grow&#39;);
    });
    button.addEventListener(&#39;mouseleave&#39;, () =&gt; {
        innerCursor.classList.remove(&#39;grow&#39;);
    });
});

huangapple
  • 本文由 发表于 2023年6月21日 22:48:02
  • 转载请务必保留本文链接:https://go.coder-hub.com/76524584.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定