我如何获得一个元素来检测鼠标悬停

Question

HTML 太长了。完整的。是唯一真正重要的部分

var buttons = document.getElementsByTagName('button');

for (i = 0; i < buttons.length; i++) {
  console.log(buttons[i])
  buttons[i].onmouseenter = function() {
    console.log('hello')
  }
}

<div id='buttons'>
  <a href='https://discord.com/api/oauth2/authorize?client_id=775316623220277248&permissions=391232&scope=bot' target='_blank'>
    <button id='invbutton'><i class="fab fa-discord fa-3x"></i>Invite</button>
  </a>
  <button>Support</button>
</div>

我在 HTML 文件的末尾定义了脚本标签。我还尝试添加不起作用的事件监听器。但是，由于某种原因 'hello' 按下按钮时，控制台会记录 'hello'

Answer 1

您只是忘记了 for 循环的结束大括号。

var buttons = document.getElementsByTagName('button');

for (i = 0; i < buttons.length; i++) {
  console.log(buttons[i])
  buttons[i].onmouseenter = function() {
    console.log('hello')
  }
} //This curly bracket was missing in your code!

<div id='buttons'>
  <a href='https://discord.com/api/oauth2/authorize?client_id=775316623220277248&permissions=391232&scope=bot' target='_blank'>
    <button id='invbutton'><i class="fab fa-discord fa-3x"></i>Invite</button>
  </a>
  <button>Support</button>
</div>

Answer 2

使用 onmouseover 事件。

<button onmouseover="handleHover()">Support</button>

var buttons = document.getElementsByTagName('button');

  function handleHover() {
   console.log('Hovered');
  }

<div id='buttons'>
  <a href='https://discord.com/api/oauth2/authorize?client_id=775316623220277248&permissions=391232&scope=bot' target='_blank'>
    <button id='invbutton'><i class="fab fa-discord fa-3x"></i>Invite</button>
  </a>
  <button onmouseover="handleHover()">Support</button>
</div>

我如何获得一个元素来检测鼠标悬停

How do i get an element to detect mouse hover

html

javascript

dom-events