主页 / 问题 / 1591935
Accepted
alexWithoutBeard
Asked:2024-08-26 19:08:19 +0000 UTC2024-08-26 19:08:19 +0000 UTC

将鼠标悬停在链接上时获取 href 属性

  • 772

提供了链接。确保将鼠标悬停在任何链接上时，其 href 属性的值显示在其上方。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <a href="dasdas">asdasd</a>
  <a href="dasdasddas">asdasasdasd</a>
  <a href="dasdasdasdas">asdasasdasd</a>
  <script>
    let href = document.querySelector('a')
    document.body.onmouseenter = function(e) {
      let traget = e.target
      console.log(traget.getAttribute('href')) // получаю значение, но с null

      // здесь я остановился и не могу понять как вывести значение атрибута>

    }
  </script>
</body>

</html>

我又看了一遍关于鼠标事件的章节，还是不太明白。应该通过 :hover 来实现吗？

javascript

3 个回答

  1. Best Answer

    确保当您将鼠标悬停在任何链接上时，其 href 属性的值显示在其上方

    你可以使用 CSS :)

    a:hover {
  position: relative;
}

a:hover::after {
  display: inline-block;
  content: attr(href);
  position: absolute;
  left: 0;
  bottom: 100%;
  color: #000;
  pointer-events: none;
  user-select: none;
}
    <br><br>
<a href="dasdas">asdasd</a>
<a href="https://site.com/dasdasddas">asdasasdasd</a>
<a href="dasdasdasdas">asdasasdasd</a>

    • 2

  2. 让我们理解，在问题本身中onmouseenter，处理程序绑定到document.body，它不会按预期工作，因为它只在光标进入该区域时触发一次body，因此它不适用于单个链接。您可以保留它document.body，但将事件更改为mouseover并使用委托：

    const tooltip = document.getElementById('tooltip');

document.body.addEventListener('mouseover', function(e) {
  if (e.target.tagName.toLowerCase() === 'a') {
    tooltip.textContent = e.target.getAttribute('href');
    tooltip.style.display = 'block';

    const rect = e.target.getBoundingClientRect();
    tooltip.style.left = rect.left + 'px';
    tooltip.style.top = (rect.top - tooltip.offsetHeight) + 'px';
  }
});

document.body.addEventListener('mouseout', function(e) {
  if (e.target.tagName.toLowerCase() === 'a') {
    tooltip.style.display = 'none';
  }
});
    body {
  padding-top: 100px;
}

.tooltip {
  position: absolute;
  background-color: #333;
  color: #fff;
  padding: 5px;
  border-radius: 5px;
  white-space: nowrap;
  display: none;
  z-index: 99;
}
    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <a href="dasdas">asdasd</a>
  <a href="dasdasddas">asdasasdasd</a>
  <a href="dasdasdasdas">asdasasdasd</a>

  <div id="tooltip" class="tooltip"></div>
</body>

</html>

    • 1

  3. 我又看了一遍关于鼠标事件的章节，还是不太明白。应该通过 :hover 来实现吗？

    显然我没有仔细阅读...这是可以实现的。

    document.querySelectorAll('a').forEach(o => o.addEventListener('mouseenter', e => {
  const o = e.target
  console.log(o.getAttribute('href'))
}))
    <a href="dasdas">asdasd</a>
<a href="dasdasddas">asdasasdasd</a>
<a href="dasdasdasdas">asdasasdasd</a>

    • 0

相关问题